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”

根据我对the documentation的理解，以下方法应该有效，但无效。

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

请在您的webpack配置中进行以下更改：

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文件。

已编辑，请进行以下更改以生成这两个CSS文件：

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

有了该配置，将生成两个单独的CSS文件：all.css和base.css。

让我知道它是否不能解决您的问题。

Webpack提取文本插件：如何测试特定文件并将其提取以分离输出？

1 个答案: