使用webpack编译css报错

Question

错误提示：

ERROR in ./src/page/role-v/less/check-role-v/banner.css
Module parse failed: E:\wamp64\www\i-ronge\src\page\role-v\less\check-role-v\banner.css Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
| body{
|   background: red;
| }
 @ ./src/page/role-v/js/checkrole.js 6:0-42
 @ multi ./src/page/role-v/js/checkrole.js

webpack代码:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
let config = {
    entry:{
        'checkrole':['./src/page/role-v/js/checkrole.js'],
        'role':['./src/page/role-v/js//role-v.js']
    },
    output:{
        path: __dirname+'/dist',
        filename: 'js/[name].js'
    },
    module:{
        rules:[
            {
                test:'/\.js$/',
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:'env'
                    }
                }
            },
           {
                test : "/\.css$/",
                use  :  ExtractTextPlugin.extract({
                    fallback : 'style-loader',
                    use : ['css-loader','autoprefixer-loader']
                })
            },
             {
                test : '/\.less$/',
                use  : ExtractTextPlugin.extract({
                    fallback : "style-loader",
                    use: ['css-loader','autoprefixer-loader','less-loader']
                })
            }
            
        ]
    },
    plugins: [
      new ExtractTextPlugin("css/[name].css"),
    ]
}

module.exports = config;

css代码:

body{
  background: red;
}

js代码:

require('../less/check-role-v/banner.css');

Answer 1

难道是css-loader没装？

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    
    entry: path.resolve(__dirname, 'src/entry.js'),

    module: {
        rules:[
            {
                test: /\.css$/,
                use  :  ExtractTextPlugin.extract({
                    fallback : 'style-loader',
                    use : ['css-loader']
                })
            }

        ]
    },

    plugins: [
        new ExtractTextPlugin('[name].css')
    ],

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }

}