CssSyntaxError (2:1) Unknown word 1 | > 2 | var content = require("!!./index.css");

After the project is the introduction of css file error

Module build failed (from ./node_modules/[email protected]@css-loader/dist/cjs.js):
CssSyntaxError

(2:1) Unknown word

1 |
> 2 | var content = require("!!./index.css");
| ^
3 |
4 | if(typeof content === 'string') content = [[module.id, content, '']];

@ ./src/index.js 3:0-24

 

webpack.config.js Code:

= module.exports { 
  entry: './src/index.js' , 
  Output: { 
    // path.resolve resolve the current absolute path relative path path.join 
    // path: path.resolve ( './ dist /') , 
    path: path.join (__ dirname, './dist/' ), 
    filename: 'bundle.js' 
  }, 
  mODE: 'Development', // default Production 
  // Watch: monitoring pattern to true // open 
  devserver: { 
    open : to true , 
    Port: 8080 , 
    the compress: to true , 
    Hot: to true 
  }, 
  Module1: { 
    the rules: [{ 
      Test:/\.css$/,
      use: ['css-loader', 'style-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html'
    })
  ]
}

 

After reading about another project, we found that use of the order put out differently, as modified

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

Run it again,

When // webpack reading loader, from right to left

// loader execution order is from right to left in a pipeline fashion chain calls

// css-loader parsing css files, style-loader into the html file