javascript - webpack packaging css problem

Question

When I configured webpack, I set the css like this loader: 'style-loader!css-loader?modules'

This can prevent style naming conflicts between different modules. However, after setting this, the external css styles I introduced will not be packaged and cannot be displayed. What is the problem?

Answer 1

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',
          ],
        }),
      },