javascript - masalah css pembungkusan webpack

Question

Apabila saya mengkonfigurasi webpack, css telah ditetapkan seperti ini loader: 'style-loader!css-loader?modules'

Ia boleh mengelakkan konflik penamaan gaya antara modul yang berbeza, tetapi selepas menetapkannya seperti ini, gaya css luaran yang saya perkenalkan tidak akan dibungkus dan tidak dapat dipaparkan

Answer 1

Bahagikan css kepada yang perlu dibungkus dan yang tidak perlu dibungkus Secara amnya, fail sumber css yang perlu dibungkus adalah fail praproses, seperti fail yang berakhir dengan .less, .scss, .styl, dsb. . Anda boleh membungkus bahagian ini Fail dikonfigurasikan dengan webpack dan fail dengan akhiran .css tidak diproses oleh modul css.

Contoh:

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