Webpack css packing error report

configuration file:

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 file

import css from "./css/index.css";

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

newtitel();

package.json file

{
  "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"
    
  }
}

error message after running 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

tried a lot of methods can not be solved, ask God for advice! My novice rookie has just learned, please tell me a little bit in detail, thank you very much!

Mar.22,2021

module conflict, reinstall this


csscss-loader module

:


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

or directly import'. / css/index.css';

Menu