Выведите два разных CSS-файла, используя MiniCSSExtractPlugin с Webpack 4 - PullRequest
Новая
       18

Выведите два разных CSS-файла, используя MiniCSSExtractPlugin с Webpack 4

0 голосов
/ 14 января 2019

У меня есть файлы SCSS по всему каталогу ./src, который является editor-[...].scss или frontend-[...].scss, моя цель - настроить MiniCSSExtractPlugin таким образом, чтобы он принимал эти scss файлы и в зависимости от того, является ли он editor- или frontend- выводят его в разные CSS-файлы.

Прямо сейчас у меня есть 

             {
                test: /\.(css|scss)$/,
                use: [ {
                    loader: MiniCssExtractPlugin.loader
                },
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: [
                            require( 'autoprefixer' )
                        ]
                    }
                },
                {
                    loader: 'sass-loader',
                    query: {
                        outputStyle:
                            'production' === process.env.NODE_ENV ? 'compressed' : 'nested'
                    }
                } ]
            },

А потом 

plugins: [
        new MiniCssExtractPlugin({
            filename: './build/myawesomeapp-editor.css'
        })
]

Не могу понять, как настроить два выхода. Я знаю, что должен использовать regexp для поиска файлов, но я не знаю, как извлечь их в другие файлы после того, как я это сделаю.

1 Ответ

0 голосов
/ 20 июня 2019

Я знаю, что этот вопрос уже немного устарел, но я сам потратил несколько дней, пытаясь решить это. По общему признанию, я не знаю слишком много о webpack на этом этапе, так что это заняло больше времени, чем следовало бы.

То, что я в итоге сделал, это то, что указано здесь https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-css-based-on-entry

Как я реализовал это, чтобы создать json-файл конфигурации, содержащий список файлов scss, которые необходимо использовать 

{
   "file1": {
      "scss": "file1",
   },
   "file2": {
      "scss": "file2",
   },
}

(есть причины, по которым моя конкретная установка не использует массив здесь)

Тогда в моем файле webpack.config есть следующее 

const themeConfig = require('./src/config/themes.json');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const _ = require('lodash');

Затем я перебираю конфиг, чтобы создать конфиг разделенных чанков, специфичный для тем 

// specify the theme split chunk config
let themeChunks = {};
let themeFiles = [];
for (let i in themeConfig) {
  const theme = themeConfig[i];
  themeChunks[_.camelCase(`theme_${i}`)] = {
    name: `theme-${theme.css}`,
    test: new RegExp(`src\/resources\/styles\/themes\/${theme.css}.scss$`),
    chunks: 'all',
    enforce: true,
  };

  themeFiles.push(`./src/resources/styles/themes/${theme.css}.scss`);
}

Примечание: тестовая строка должна быть путем к вашим файлам scss

Тогда моя запись выглядит так 

entry: {
    app: ['./src/app.js'],
    themes: themeFiles
  },

Мои разделенные куски выглядят так 

splitChunks: {
  hidePathInfo: true, 
  chunks: "initial",
  maxSize: 200000, 
  cacheGroups: {
    default: false,

    // add the theme config
    ...themeChunks,
  }
}

И наконец мои правила 


{
  test: /\.scss$/,
  use: [
    { loader: MiniCssExtractPlugin.loader, },
    { loader: 'css-loader' },
    { loader: 'sass-loader' }
  ],
},

Это основано на примере из dwatts3624 https://github.com/webpack-contrib/mini-css-extract-plugin/issues/45#issuecomment-425645975

Надеюсь, это поможет любому, кто сталкивается с этим

...