使用 Webpack 4 将多个 (sass|css) 文件编译成多个 css 输出

Question

我有一个WP主题项目。 我正在使用 Webpack 4 编译 sass 文件并将它们与 css 合并。

项目结构

dev
|_ my-theme
|_css
| |_common
| | |_main.sass
| | |_normalize.css
| |_home
|   |_home.sass
|_style.sass

我想像这样编译：

1. dist/my-theme/style.css = style.sass 包含 normalize.css 和 main.sass 以正确的顺序排列

2. dist/my-theme/css/home/home.css = home.sass

目前，我设法用第一点做了一个独特的输出。 我看到有一个解决方案extract-text-webpack-plugin但它在 Webpack 4 中被弃用了，所以我正在使用mini-css-extract-plugin但我不知道如何做到这一点。

我当前的 webpack.config.js

const PLUGIN_DIR_NAME = "mytheme";
const GENERAL_CONFIG_INI = "../config/config.ini";
const THEME_CONFIG_INI = "./config/config.ini";
const path = require('path');
const Promise = require('bluebird');
const fs = Promise.promisifyAll( require('fs') );
const ini = require('ini');
// include the css extraction and minification plugins
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = env => {
const global_config = ini.parse( fs.readFileSync( GENERAL_CONFIG_INI, 'utf-8' ) );
const theme_config = ini.parse( fs.readFileSync( THEME_CONFIG_INI, 'utf-8' ) );
var a_author_uri = global_config.author_uri.split(":");
var author_protocol = a_author_uri[0];
var author_uri_without_protocol = a_author_uri[1].replace( "//", "" );
var a_author_uri_domain = author_uri_without_protocol.split(".");
var author_uri_domain_name, author_uri_extension;
if( a_author_uri_domain.length === 3 ){
author_uri_domain_name = a_author_uri_domain[1];
author_uri_extension = a_author_uri_domain[2];
}else if( a_author_uri_domain.length === 2 ){
author_uri_domain_name = a_author_uri_domain[0];
author_uri_extension = a_author_uri_domain[1];
}
var a_prev_theme_version = theme_config.theme_infos.version.split(".");
var prev_major_theme_version = parseInt( a_prev_theme_version[0] );
var prev_minor_theme_version = parseInt( a_prev_theme_version[1] );
var prev_patch_theme_version = parseInt( a_prev_theme_version[2] );
var prev_build_theme_version = parseInt( a_prev_theme_version[3] );
var next_build_theme_version, next_patch_theme_version, next_minor_theme_version, next_major_theme_version;
if( env.version === "build" ){
next_build_theme_version = prev_build_theme_version + 1;
next_patch_theme_version = prev_patch_theme_version;
next_minor_theme_version = prev_minor_theme_version;
next_major_theme_version = prev_major_theme_version;
}else if( env.version === "patch" ){
next_build_theme_version = 0;
next_patch_theme_version = prev_patch_theme_version + 1;
next_minor_theme_version = prev_minor_theme_version;
next_major_theme_version = prev_major_theme_version;
}else if( env.version === "minor" ){
next_build_theme_version = 0;
next_patch_theme_version = 0;
next_minor_theme_version = prev_minor_theme_version + 1;
next_major_theme_version = prev_major_theme_version;
}else if( env.version === "major" ){
next_build_theme_version = 0;
next_patch_theme_version = 0;
next_minor_theme_version = 0;
next_major_theme_version = prev_major_theme_version + 1;
}
theme_config.theme_infos.version = next_major_theme_version + "." + next_minor_theme_version + "." + next_patch_theme_version + "." + next_build_theme_version;
fs.writeFileSync( THEME_CONFIG_INI, ini.stringify( theme_config, {} ) );
return{
plugins: [
new CleanWebpackPlugin(),
// extract css into dedicated file
new MiniCssExtractPlugin({
filename: './' + PLUGIN_DIR_NAME + '/style.css'
}),
//Only copy php files
new CopyPlugin([
{
from: 'dev',
ignore: ['*.sass', 'next/css/common/**/*.css'],
},
])
],
entry: [ './dev/' + PLUGIN_DIR_NAME + '/style.sass', './dev/' + PLUGIN_DIR_NAME + '/css/common/normalize.css', './dev/' + PLUGIN_DIR_NAME + '/css/common/main.sass' ],
output: {
path: path.resolve(__dirname, 'dist/'),
},
module: {
rules: [
// compile all .scss files to plain old css
{
test: [/css/common/.*.(css|sass)$/],
use: [{loader: MiniCssExtractPlugin.loader},
{loader: 'css-loader'},
{
loader: 'sass-loader',
options: {
prependData: '$theme-name: ' + theme_config.theme_infos.name +
';$author:' + global_config.author +
';$author-uri-protocol:' + author_protocol +
';$author-uri-domain:' + author_uri_domain_name +
';$author-uri-extension:' + author_uri_extension +
';$description:' + theme_config.theme_infos.description.replace(/:/g, "%3A").replace(/;/g, "%3B") + ';' +
';$version-major:' + next_major_theme_version + ';' +
';$version-minor:' + next_minor_theme_version + ';' +
';$version-patch:' + next_patch_theme_version + ';' +
';$version-build:' + next_build_theme_version + ';',
}
}
]
}
]
}
}
};

Answer 1

我使用MiniCssExtractPlugin找到了解决方案。 解决方案就在这里。

基本上，您可以使用对象将 json 数组更改为entry值。

以前

entry: [ './dev/' + PLUGIN_DIR_NAME + '/style.sass', './dev/' + PLUGIN_DIR_NAME + '/css/common/normalize.css', './dev/' + PLUGIN_DIR_NAME + '/css/common/main.sass' ],

后

entry:{
style: [ './dev/' + PLUGIN_DIR_NAME + '/style.sass', './dev/' + PLUGIN_DIR_NAME + '/css/common/normalize.css', './dev/' + PLUGIN_DIR_NAME + '/css/common/main.sass' ],
home: [ './dev/' + PLUGIN_DIR_NAME + '/css/home/home.sass' ]
},

如果您希望其中一个 css 文件位于子目录中，例如css/home.css：

entry:{
style: [ './dev/' + PLUGIN_DIR_NAME + '/style.sass', './dev/' + PLUGIN_DIR_NAME + '/css/common/normalize.css', './dev/' + PLUGIN_DIR_NAME + '/css/common/main.sass' ],
'css/home': [ './dev/' + PLUGIN_DIR_NAME + '/css/home/home.sass' ]
},