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

这里是link to my full webpack config。不知道我在这里想念什么。

Answer 1

您应该具有这样的CSS模块

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

另一个soulution

的参考链接

样式未导入组件中

1 个答案: