What to do if there is an error in webpack packaging css

Solution to webpack package css error: 1. Modify the syntax of webpack2 to "-loader"; 2. Add "style-loader"; 3. Modify the order to "style-loader!css-loader; ".

The operating environment of this article: windows7 system, webpack2.0&&css3 version, Dell G3 computer.

Problem: webpack is packaged successfully, but css error occurs, CSS does not work

Problem analysis/solution: The reasons are as follows

Uses the syntax of webpack2 The rule is incorrect; webpack2 requires that -loader must be written;

It may be that only css-loader is written and style-loader is not written;

The order is reversed and must be written as style-loader!css- loader;

Extension:

Question: What will happen if style-loader or css-loader is not written;

Answer:

Not written style-loader, the build file will be generated, but you will find that the js in the page does not work;

If you do not write css-loader, an error will be reported directly: 'You may need an appropriate loader to handle this file type.'

Q: What are the functions of style-loader and css-loader?

Answer:

Style-loader just does not work and does not report an error, which means that its function is to insert the style into the DOM element; combined with the answers on the Internet and observing the preview page, we found: style -loader will generate an internal ;

in the header tag of the page. css-loader will report an error because it affects the webpack build process. Combined with online sharing and the 'You may need an appropriate loader to handle this file type.' error message, it means that the existence of css-loader enables the successful introduction of css in js through require or import; through css-loader, it can be implemented in js files Introduce css through require.

My configuration file

const webpack = require('webpack');
const path = require('path');
module.exports = {
   entry: {
       'bundle': './a.js',
   },
   output: {
       path: path.resolve(__dirname, 'build'),
       filename: '[name].js',
       chunkFilename: '[name].js'
   },
   module: {
       loaders: [
           {
               test: /\.css$/,
               loader: 'style-loader!css-loader'
           },
           {
               test: /\.js[x]?$/,
               exclude: 'node_modules/',
               loader: 'babel-loader'
           }
       ]
   },
 plugins: [
  ]
};

Recommended: "css video tutorial"

The above is the detailed content of What to do if there is an error in webpack packaging css. For more information, please follow other related articles on the PHP Chinese website!