Question

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

项目结构

value

我想这样编译：

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

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

我当前的webpack.config.js

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

Answer 1

我找到了使用MiniCssExtractPlugin的解决方案。解决方案是here。

基本上，您可以使用对象将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' ]
},

使用Webpack 4将多个（sass | css）文件编译成多个CSS输出

1 个答案: