javascript - Webpack 运行 .LESS 和 .SCSS 编译。提取文本插件不适用于一个捆绑文件

Question

我需要在同一个项目输出中同时运行 LESS 和 SCSS 编译以分离 CSS 文件。

该项目基于 LESS，但现在在过渡阶段添加了 SCSS。

暂时不想更新webpack。 Webpack 运行良好但生成了 common.bundle.js 文件，但 CSS 并未从该包中提取。

它提取的其他 block 和新 SCSS 正常，但不是核心包文件 (common.bundle.js)。

我曾尝试更改 webpack.config.js 中的顺序，但这无济于事。 I see this 'Multiple Instances' as well但无法解决。

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");


module.exports = {
    devtool: "source-map",
    entry: {
        "login.bundle": "./dash/app/login.js",
        "summary.bundle": "./dash/app/summary.js",
        "metrics.bundle": "./dash/app/metrics.js",
        "market_share.bundle": "./dash/app/market_share.js",
        "broker.bundle": "./dash/app/broker.js",
        "event_studies_custom.bundle": "./dash/app/event_studies_custom.js",
        "case_studies.bundle": "./dash/app/case_studies.js",
        "home.bundle": "./dash/app/home.js"
    },
    output: {
        path: __dirname + '/dash/static/js',
        filename: "[name].js"
    },
    module: {
        loaders: [{
            test: require.resolve("jquery"),
            loader: "expose-loader?$!expose-loader?jQuery"
        }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader"})
        }, {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader!less-loader"})
        }, {
            test:/\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader?url=false', 'sass-loader']
            })
        }, {
            test: /\.(woff|eot|ttf|svg)(\?\S*)?$/,
            loader: "url-loader?limit=100000"
        }, {
            test: /\.(jpe?g|png|gif|svg)$/i,
            loader: 'url-loader?limit=100000!img-loader'
        }, {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }]
    },
    plugins: [
        new CommonsChunkPlugin({
            name: ['common'],
            filename: 'common.bundle.js'
        }),
        new ExtractTextPlugin("[name].css")]
};

包.json

{
  "name": "project",
  "version": "1.0.0",
  "description": "project descritption",
  "main": "bundle.js",
  "scripts": {
    "build": "webpack -p",
    "develop": "webpack",
    "watch": "webpack --watch"
  },
  "repository": {
    "type": "git",
    "url": "project.git"
  },
  "author": "me",
  "license": "All Rights Reserved",
  "private": true,
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-env": "^1.1.8",
    "backbone": "^1.3.3",
    "block-ui": "^2.70.1",
    "css-loader": "^0.28.11",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.9.0",
    "grid-list": "^0.4.1",
    "handlebars": "^4.0.5",
    "highcharts": "5.0.11",
    "img-loader": "^1.3.1",
    "imports-loader": "^0.8.0",
    "jquery": "^3.1.1",
    "jquery-colorbox": "^1.6.4",
    "jquery-ui": "^1.12.1",
    "jquery.mousewheel": "^3.1.9",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "less-plugin-clean-css": "^1.5.1",
    "moment": "^2.17.0",
    "node-sass": "^4.8.3",
    "raven-js": "^3.14.0",
    "sass-loader": "^7.0.1",
    "select2": "^4.0.6-rc.1",
    "style-loader": "^0.20.3",
    "underscore": "^1.8.3",
    "url-loader": "^0.5.7",
    "vis": "4.21.0",
    "webpack": "^2.7.0"
  }
}

Answer 1

是的，你的方向是对的。您可以为此使用 extract-text-webpack-plugin。 只需为生成的包中的每个文件定义一个提取器，然后在 module.rules 中使用它来获取所需的规则。

下面是对 css/scss/less 文件使用其中 3 个提取器的示例。每个文件一个。

(在 webpack 4.x 上创建和测试)

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

// Create extract plugin for each file you want to create in resulting bundle
const extractCSS = new ExtractTextPlugin('output-folder/or/whatever/from-css.css');
const extractLESS = new ExtractTextPlugin('output-folder/or/whatever/from-less.css');
const extractSCSS = new ExtractTextPlugin('output-folder/or/whatever/from-scss.css');

module: {
  rules: [
      // ...
      {
        test: /\.less$/,
        use: extractLESS.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader', options: { importLoaders: 1 } }, // importLoaders equals to number of loaders in array after this one.
            'less-loader'
          ]
        })
      },
      {
        test: /\.scss$/,
        use: extractSCSS.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader', options: { importLoaders: 1, url: false } }, // importLoaders equals to number of loaders in array after this one.
            'sass-loader'
          ]
        })
      },
      {
        test: /\.css$/,
        use: extractCSS.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
  ],
  plugins: [
    // Include each of "extractors" here. Order is not important
    extractLESS,
    extractSCSS,
    extractCSS,
    // ...
  ]
}

我实际上并没有运行这个例子，只是从我的项目中取出它并更新它以适应你的问题。 因此，如果某些内容未按预期工作，请随时发表评论并提出问题。我会更新我的回复。