[英]Webpack: How to merge css and less, THEN apply cssnano
I managed to compile my css and less resources („imported“ from javascript) to all-my-LESS|CSS
, extract them using ExtractTextPlugin
and merge them together with MergeFilesPlugin
to combinedStyles.css
. 我设法将css和更少的资源(从javascript“导入”)编译为all-my-LESS|CSS
,使用ExtractTextPlugin
提取它们,然后将它们与MergeFilesPlugin
合并到combinedStyles.css
。
The bit I am missing: How to run cssnano (eg through postcss?) on top of that as the finishing bit? 我缺少的一点:如何在最后运行cssnano(例如通过postcss?)? (Oh, and while I habe inline source maps, I didn't manage to generate an external combinedStyles.map
file). (哦,虽然我只是内联源地图,但我没有设法生成一个外部的combinedStyles.map
文件)。
This is my combined webpack.config.babel.js
(ignore the babel bit, just means, you may write it in ES6, with fancier import statements): 这是我组合的webpack.config.babel.js
(忽略babel位,只是意味着,您可以使用更高级的import语句在ES6中编写它):
import path from 'path';
const webpack = require('webpack'); //to access built-in plugins
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import MergeFilesPlugin from 'merge-files-webpack-plugin';
const extractCSS = new ExtractTextPlugin("all-my-CSS.css");
const extractLESS = new ExtractTextPlugin("all-my-LESS.css");
export default {
entry: [ './src/index_5.js' ],
output: {
path: path.resolve( 'dist')
filename: 'bundle.js',
sourceMapFilename: './bundle.js.map'
},
module: {
rules: [{
test: /\.css$/,
use: extractCSS.extract(
[{ // This is basically "use"
loader: "css-loader",
options: {
minimize: false, // done later
sourceMap: true,
modules: false, // no css modules, all global styles
}
}]
)
},
{
test: /\.less$/,
use: extractLESS.extract( // This is basically "use"
[// No style-loader here! We want this external!
{
loader: "css-loader", // translates CSS into CommonJS
options: {
minimize: false,
sourceMap: true
}
}, {
loader: "less-loader", // compiles Less to CSS
options: {
sourceMap: true,
}
}]
)
}
] // rules
}, // module
devtool: 'inline-source-map',
devServer: { inline: true },
plugins: [
extractCSS,
extractLESS,
new MergeFilesPlugin({
filename: 'combinedStyles.css', //output filename
test: /\.css$/,
deleteSourceFiles: false // for now
})
]
};
I have added postcss-loader
with css-nano
, check if it helps. 我用css-nano
添加了postcss-loader
,检查是否有帮助。
Also I don't see here need to use MergeFilesPlugins ( just my opinion) . 我也看不到这里需要使用MergeFilesPlugins(只是我的看法)。 ExtractTextPlugin
can be useful here. ExtractTextPlugin
在这里可能很有用。
Just use one ExtractTextPlugin and put all css or less file in one folder( with .css or .less ext ), loaders will be applied to them selectively and later in plugins just use 只需使用一个ExtractTextPlugin并将所有css或更少的文件放在一个文件夹(带有.css或.less ext)中,加载程序将选择性地应用于它们,稍后在插件中使用
new ExtractTextPlugin('style.css')
to get a common css file extracted. 获取提取的通用CSS文件。
Using cssnano : 使用cssnano:
[{
test: /\.css$/,
use: ExtractTextPlugin.extract(
[{ // This is basically "use"
loader: "css-loader",
options: {
minimize: false, // done later
sourceMap: true,
modules: false, // no css modules, all global styles
}
},
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('cssnano')({
autoprefixer: false,
safe: true
})
];
}
}
}]
)
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract( // This is basically "use"
[// No style-loader here! We want this external!
{
loader: "css-loader", // translates CSS into CommonJS
options: {
minimize: false,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('cssnano')({
autoprefixer: false,
safe: true
})
];
}
}
},
{
loader: "less-loader", // compiles Less to CSS
options: {
sourceMap: true,
}
}]
)
}
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.