javascript - webpack packaging css problem
typecho
typecho 2017-07-05 10:43:58
0
1
1039

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?

typecho
typecho

Following the voice in heart.

reply all(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',
          ],
        }),
      },
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!