嘗試使用css-loader時出錯

Question

在使用Reactjs開發時，我對css-loader有問題。 基本上，這是我的webpack.config ：

{
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'],
},

這就是我實現CSS的方式：

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

這是我的Home.css

.input-search{
width: 500px;
}

我正在使用Hasnode的mern-starter

但是沒有CSS加載。 我該怎么辦 ？

Answer 1

只需將其更改為此，看看它是否有效：

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

如果exclude: /node_modules/ ，則添加您的exclude: /node_modules/最后，如果exclude: /node_modules/ ，則添加所有瘋狂的?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap附加內容。

還可以考慮在您的配置中添加一個resolve部分：

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