无法解析模块“ css-loader”

时间:2019-07-05 17:15:32

标签: webpack css-loader

这是我的webpack.config.js。我不能使它工作。除了该代码外,我还向根组件提供了'import'../style.css'。我将代码分为2个包,并希望使用CSS来获得第三个包。但是,它不起作用。救命!

const webpack = require('webpack');
const path =  require('path');

module.exports = {
  entry: {
  app: ['./src/App.jsx'],
  vendor: ['react','react-dom','whatwg-fetch','babel-polyfill','react- 
         router','react-router-bootstrap','react-bootstrap'],
 },

  output: {
  path:path.resolve(__dirname,'static'),
  filename: 'app.bundle.js',  
},
module: {
 loaders: [  
{
  test: /\.css$/,
 loader: 'style-loader'
},   
{
  test: /\.css$/,
 loader: 'css-loader'
 },      
    {
      test: /\.jsx$/,
      loader: 'babel-loader',
      query: {
         presets: ['react','es2015']
    }, 
  },
 ],
   resolve: {
      extensions:['.js','.jsx','.css'],
   },
 },
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor','vendor.bundle.js'), 
  ],
}

未找到模块:错误:无法解析模块'css-loader'

2 个答案:

答案 0 :(得分:1)

确保已安装css-loader和style-loader模块

npm install style-loader css-loader --save-dev

您还可以将装载程序链接在一起,以便您的CSS只有一个规则块

test: /\.css$/,
use: [
    {
        loader: 'style-loader'
    },
    {
        loader: 'css-loader'
    }
]

答案 1 :(得分:0)

卢克·弗洛诺(Luke Flournoy)为这个问题提供了完美的答案。 确保已安装css-loader和style-loader模块

npm install style-loader css-loader --save-dev

您还可以将装载程序链接在一起,以便您的CSS只有一个规则块

test: /\.css$/,
use: [
{
    loader: 'style-loader'
},
{
    loader: 'css-loader'
}
]