尝试使用css-loader时出错

时间:2017-09-17 16:29:20

标签: javascript reactjs webpack webpack-dev-server css-loader

在使用Reactjs进行开发时,我遇到了css-loader的问题。基本上,这是我的View

webpack.config

这就是我实现css的方式:

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

这是我的import styles from './Home.css'; . . . <FormControl type="text" className={styles['input-search']}/>

Home.css

我使用Hasnode的mern-starter

但是没有加载css。我该怎么办?

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:0)

只需将其更改为此内容并查看其是否有效:

{
    test: /\.css$/,
    loader: 'style-loader!css-loader'
}

如果有效,请添加exclude: /node_modules/,最后,如果有效,则添加所有疯狂的?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap添加内容。

还可以考虑在配置中添加一个解析部分:

resolve: {
    modules: [
      path.join(__dirname, '../src/components'),
      'node_modules'
    ],
    extensions: ['.js', '.jsx', '.css']
  },