webpack 打包css问题

Question

我在配置webpack的时候，关于css这块是这样设置的 loader: 'style-loader!css-loader?modules'可以使不同模块之间的样式命名不会冲突，但是这样设置之后，我引入的外部css样式，就不被打包，不能显示了，请问是什么问题

Answer 1

将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',

          ],

        }),

      },