javascript - webpack 打包css问题

问题描述

问 题

我在配置webpack的时候，关于css这块是这样设置的 loader: 'style-loader!css-loader?modules'

可以使不同模块之间的样式命名不会冲突，但是这样设置之后，我引入的外部css样式，就不被打包，不能显示了，请问是什么问题

解决方案

将css分为需要打包的和不需要打包的，一般需要打包的css源文件都是预处理文件，比如以.less，.scss，.styl结尾的文件等等，可以对这部分需要打包的文件进行webpack配置，而对.css后缀的文件不作css module处理。

示例：

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

这篇关于javascript - webpack 打包css问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！