Javascript – Webpack-Verpackungs-CSS-Problem

Question

Wenn ich das Webpack konfiguriere, stelle ich den Loader für CSS wie folgt ein: „style-loader!css-loader?modules“, damit die Stilbenennung zwischen verschiedenen Modulen nicht in Konflikt gerät. Nachdem ich ihn jedoch so eingestellt habe, habe ich externes CSS eingeführt Der Stil wird nicht verpackt und kann nicht angezeigt werden. Was ist der Grund?

大家讲道理 · Answer

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