javascript - webpack packaging css problem

Question

When I configure webpack, I set the loader for css like this: 'style-loader!css-loader?modules' so that the style naming between different modules will not conflict. However, after setting it like this, I introduced external The css style will not be packaged and cannot be displayed. What is the reason...

大家讲道理 · Answer

Divide css into those that need to be packaged and those that do not need to be packaged. Generally, the css source files that need to be packaged are preprocessed files, such as files ending with .less, .scss, .styl, etc. You can package these parts The file is configured with webpack, and files with the .css suffix are not processed by css module.

Example:

      {
        test: /\.pcss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              camelCase: true,
              importLoaders: 1,
              localIdentName: '[path][name]---[local]---[hash:base64:5]',
              modules: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require('postcss-import')({
                  path: path.join(baseDir, './src/style'),
                }),
                require('postcss-cssnext'),
                require('postcss-nested'),
                require('postcss-functions')({
                  functions: {
                    // any funcs you wanna
                  },
                }),
              ],
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
          ],
        }),
      },