javascript - problème CSS d'emballage Webpack

Question

Lorsque j'ai configuré Webpack, le CSS était défini comme ceci loader: 'style-loader!css-loader?modules'

Cela peut éviter les conflits de noms de styles entre différents modules. Cependant, après l'avoir configuré ainsi, les styles CSS externes que j'ai introduits ne seront pas empaquetés et ne pourront pas être affichés

.

Answer 1

Divisez les CSS entre ceux qui doivent être empaquetés et ceux qui n'ont pas besoin d'être empaquetés. Généralement, les fichiers sources CSS qui doivent être empaquetés sont des fichiers prétraités, tels que les fichiers se terminant par .less, .scss, .styl, etc. . Vous pouvez empaqueter ces parties. Le fichier est configuré avec webpack et les fichiers avec le suffixe .css ne sont pas traités par le module css.

Exemple :

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