Question

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

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

我暂时不想更新webpack。 Webpack运行正常，但生成common.bundle.js文件，但CSS没有从这一个包中提取。

它提取的其他块和新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")]
};

的package.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。只需为结果包中的每个文件定义提取器，并在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, // ... ] }中使用它来获取所需的规则。

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

（在webpack 4.x上创建并测试）

#include <iostream>
#include <regex>
#include <string>
#include <iterator>

int main()
{
    std::string text = "Myfile####.mp4";
    std::regex re("####");
    int num = 252;

    //convert int to string and add appropriate number of 0's
    std::string nu = std::to_string(num);
    while(nu.length() < 4) {
        nu = "0" + nu;
    }

    //let regex_replace do it's work
    std::regex_replace(std::ostreambuf_iterator<char>(std::cout),
                       text.begin(), text.end(), re, nu);
    std::cout << std::endl;

    return 0;
}

我实际上没有运行这个示例，只是从我的项目中取出它并更新它以适合您的问题。因此，如果某些内容无法正常工作，请随时留下评论。我会更新我的回复。

Webpack同时运行.LESS和.SCSS编译。提取文本插件不能在一个包文件上工作

1 个答案: