Question

我正在尝试为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的信息，但是我已经安装了它们，并且它们在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/
  }

这是resolve中我的webpack.config.js部分

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/
}

尽管已安装模块，但无法解析模块style-loader！css-loader

1 个答案: