我的index.js有以下导入
import "./less/home.less";
import "./less/dashboard.less";
所以现在,我希望webpack为我创建两个单独的css文件。 home.css
和dashboard.css
。
如何使用less-loader
css-loader
和extract-text-webpack-plugin
这是我的webpack配置文件。
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractLess = new ExtractTextPlugin({filename:'stylesheets/[name].css'});
module.exports = {
entry : "./index.js",
output : {
path : path.resolve(__dirname),
publicPath : '/',
filename : "bundle.js"
},
module : {
rules : [
{
test : /\.less$/,
use : extractLess.extract(['css-loader', 'less-loader' ])
}]
},
plugins : [extractLess],
resolve : {
extensions : ['.js'],
},
};
答案 0 :(得分:0)
它可以通过更新代码
来工作module : {
rules : [
{
test : /\.less$/,
use : extractLess.extract(['css-loader', 'less-loader' ]),
loader: ExtractTextPlugin.extract({
loader:[ 'css', 'less' ],
fallbackLoader: 'style-loader'
})
}]
},