在 webpack 中使用更少的加载器

Question

我正在用webpack创建一个捆绑.js文件。我决定我也想开始使用 LESS，并且我尝试按照说明添加 less 加载器：

https://github.com/webpack-contrib/less-loader

我跑了： npm-install less-loader --save-dev

然后我更新了 webpack.config.js 以包含规则：

module.exports = {
entry: "./src/entry.js",
output: {
path: __dirname,
filename: "./bundle.js",
publicPath: "/"
},
module: {
//******** BELOW IS THE RULES U ADDED *************/
rules: [{
test: /.less$/,
use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}, {
loader: 'less-loader' // compiles Less to CSS
}]
}],
//******** ABOVE IS THE RULES U ADDED *************/
rules: [
{
test: /.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
],
rules: [
{
test: /.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
},
{
test: /.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']                  
}
}
}
]
},
devServer: {
stats: 'errors-only'
},
stats: {
colors: true
},
devtool: 'source-map'
};

然后我添加了一个更少的文件并要求它，如下所示： require("./Bootstrap/bootstrap-iso.less"(;

less文件只是引导程序的包装器(我也尝试过更简单的css(

#entry {
@import (less) './css/bootstrap.css';
}

但是我继续收到以下错误：

ERROR in ./src/Bootstrap/bootstrap-iso.less
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #entry {
|     @import (less) './css/bootstrap.css';
|   }
@ ./src/entry.js 13:0-41

似乎加载器没有正确加载？

Answer 1

这是我的错误，我不应该有多个规则属性.. 请参阅工作 webpack.config.js 片段：

module: {
rules: [{
test: /.(less)$/,
use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}, {
loader: 'less-loader' // compiles Less to CSS
}]
},
{
test: /.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
},
{
test: /.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']
}
}
}
]
}