盡管已安裝模塊，但無法解析模塊style-loader！css-loader

Question

我正在嘗試為webpack/react開發工作webpack/react CSS模塊。

這是我當前的JS代碼：

import styles from './App.css';

//inside a React render function
const classes=[styles.large,styles.red,styles.bold];
<p className={classes.join(' ')}>Something</p>

當我運行命令./node_modules/.bin/webpack ，出現以下錯誤：

Module not found: Error: Can't resolve 'style-loader!css-loader' in '/srv/site/public'

我在線閱讀通過npm install style-loader css-loader --save來安裝style-loader和css-loader，但我已經安裝了它們，並且它們在package.json內的devDependencies上列出package.json

我的版本：

style-loader : ^0.23.1
css-loader : ^2.1.0
react : ^16.6.3
webpack : ^3.12.0
npm : 6.5.0
node: 11.7.0

這是我css portion of the modules area of webpack.config.js

  {
    test: /\.css$/,
    loader: 'style-loader!css-loader',
    options:{
      modules:true,
      localIdentName:'[path][name]__[local]--[hash:base64:5]',
    },
    exclude: /node_modules/
  }

這是我webpack.config.js resolve部分

resolve:{
    extensions:['.js','.jsx','.css'],
     modules:['node_modules']
 },

我現在不確定該怎么辦。

Answer 1

這是兩個不同的加載器，您需要一個接一個地運行它們，請嘗試以下操作：

{
    test: /\.css$/,
    use: [
        {loader: "style-loader"},
        {loader: "css-loader"}
    ],
    options:{
      modules:true,
      localIdentName:'[path][name]__[local]--[hash:base64:5]',
    },
    exclude: /node_modules/
}