样式未导入组件中

Question

我正在尝试从CSS文件导入样式，但无法导入任何内容。 这是我导入的方式

import React    from 'react'

import * as styles from './styles.css'

/* eslint-disable */
console.log('******************************************')
console.log(styles) // /styles.[hashValue].css
console.log('******************************************')

export default function SideNav() {
  return (
    <div className={'navBar'}>{'Side Nav'}</div>
  )
}

我正在使用Webpack捆绑。 这是CSS处理程序代码：

/ *禁止eslint导入/无外部依赖* /从'mini-css-extract-plugin'导入MiniCssExtractPlugin

const devStyleConfig = [
  {
    loader  : MiniCssExtractPlugin.loader,
    options : {
      hmr : true
    }
  },
  {
    loader  : 'css-loader',
    options   : {
      importLoaders    : 1,
      modules          : true,
      sourceMap        : false,
      camelCase        : true,
      localIdentName   : '[path][name]--[local]--[hash:base64]'
    }
  },
  {
    loader  : 'postcss-loader'
  }
]

export default devStyleConfig

这是我完整的webpack配置的链接 。 不知道我在这里想念什么。

Answer 1

你应该有这样的CSS模块

{
  test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
}

其他解决方案的参考链接