Плагин для извлечения текста из Webpack: как проверить наличие файла и извлечь его в отдельный вывод?

Question

Обычный способ использования плагина для извлечения текста из Webpack выглядит следующим образом:

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: {
    // ...
  },
  output: {
    // ...
  },
  module: {
    rules: [
      // ...
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    // ...
    new ExtractTextPlugin('path/to/style.css')
  ]
}

Это, конечно, хорошо работает.

Проблема, с которой я сталкиваюсь, заключается в том, что я пытаюсь проверить разные пути и вывести в разные места.

В моем случае я пытаюсь:

• Проверка путей, заканчивающихся на "_base.scss", и вывод их в "main / base.css"
• Проверка путей, заканчивающихся на ".scss" (то есть все файлы scss), и вывод их в "example / style.css"

Исходя из моего понимания из документации , следующее должно работать, но это не так.

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const allSCSS = new ExtractTextPlugin('example/style.css')
const baseSCSS = new ExtractTextPlugin('main/base.css')

module.exports = {
  entry: {
    // ...
  },
  output: {
    // ...
  },
  module: {
    rules: [
      // ...
      {
        test: /\.scss$/,
        use: allSCSS.extract({
        fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /_base\.scss$/,
        use: baseSCSS.extract({
        fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
    ]
  },
  plugins: [
    // ...
    allSCSS,
    baseSCSS
  ]
}

Когда я запускаю это, все, что я получаю в качестве вывода, это «example / style.css» со всеми стилями, но не «main / base.css».

Может кто-нибудь объяснить правильный способ сделать это, пожалуйста?

Answer 1

Пожалуйста, внесите следующие изменения в конфигурацию вашего веб-пакета ::

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: {
    // ...
  },
  output: {
    // ...
  },
  module: {
    rules: [
      // ...
      {
        test: /\.scss$/,
       loader: ExtractTextPlugin.extract("style-loader", "sass-loader")
      },

    ]
  },
  plugins: [
    // ...
     new ExtractTextPlugin("style.css")
  ]
}

Сначала установите style-loader и sass-loader. и вам не нужно делать разные CSS-файлы.

EDITED Пожалуйста, внесите следующие изменения, чтобы сгенерировать эти два файла css:

const allSCSS = new ExtractTextPlugin('all.css')
const baseSCSS = new ExtractTextPlugin('base.css')

С этой конфигурацией будут созданы два отдельных файла CSS: all.css и base.css.

Дайте мне знать, если это не решит вашу проблему.