webpack css打包报错

Question

配置文件：

const path=require('path');
module.exports={
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js',
    },//入口
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js'
    },//出口
    module:{
       
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader'],
                
            }
        ]
    },//打包css 图片转换
    plugins:[],//插件
    devServer:{
        contentBase:path.resolve(__dirname,'dist'),
        host:'10.0.21.203',
        compress:true,
        port:1818
    },//服务
    
}

entry.js文件

import css from './css/index.css';

function newtitel(){
document.getElementById('title').innerHTML = 'Hello 111test!';}

newtitel();

package.json文件

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "test webpack",
  "main": "index.js",
  "scripts": {
  
    "server": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.11",
    "style-loader": "^0.21.0",
    "webpack": "^4.12.2",
    "webpack-dev-server": "^3.1.4"
    
  }
}

运行npm run server后报错的信息

ERROR in ./src/css/index.css (./node_modules/_css-loader@0.28.11@css-loader!./src/css/index.css)
Module build failed (from ./node_modules/_css-loader@0.28.11@css-loader/index.js):
TypeError: Cannot read property 'close' of undefined
    at Object.<anonymous> (F:\webpack_demo\node_modules\_chalk@2.4.1@chalk\index.js:72:75)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (F:\webpack_demo\node_modules\_postcss@6.0.23@postcss\lib\css-syntax-error.js:9:14)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
 @ ./src/css/index.css 2:14-97
 @ ./src/entry.js
 @ multi (webpack)-dev-server/client?http://10.0.21.203:1818 ./src/entry.js

尝试了很多方法都解决不了，求大神赐教！！！本人新手小白刚学习，请说的详细的一点，非常感谢！

Answer 1

模块冲突了, 重新安装此

rm -rf node_modules
rm package-lock.json
npm install

Answer 2

css怎么写的

Answer 3

我看你的代码中是将css文件作为模块导入，但是并没有设置css-loader的 module属性

试试下面这个：

            {
                test:/\.css$/,
                use : [
                    {
                        loader : "style-loader",
                    },
                    {
                        loader :"css-loader",
                        options : {
                            module : true,
                        } 
                    }   
                  ]
                
            }

或者直接import './css/index.css';