[英]Webpack doesn't bundle less to css?
I tried various configurations. 我尝试了各种配置。 I managed to transpile my jsx code to a bundled JS, so that seems to work.
我设法将我的jsx代码转换为捆绑的JS,因此似乎可行。
Now I'm trying to bundle my .less files into a single bundled .css file in the /wwwroot/ 现在,我尝试将.less文件捆绑到/ wwwroot /中的单个捆绑的.css文件中
Every source I've tried to search online shows 1 of the 3 different sources that they've copied but I can get none of them to work. 我尝试在线搜索的每个来源都显示了他们已复制的3种不同来源中的一种,但我无法使它们正常工作。
How can I make webpack bundle my less files and bundle it into a single css file in /wwwroot/ ? 如何使webpack捆绑我较少的文件并将其捆绑到/ wwwroot /中的单个CSS文件中?
My file structure: 我的文件结构:
/wwwroot/ /* wwwroot, public files*/
/Content/css/ /* .less files */
/Content/jsx/ /* .jsx files */
My webpack configruation: 我的webpack配置:
"use strict";
var glob = require("glob");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
app: glob.sync("./Content/*/*.jsx")
},
output: {
filename: "./wwwroot/[name].min.js"
},
devServer: {
contentBase: ".",
host: "localhost",
port: 9000
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: "babel-loader"
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract({
use: "less-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: "./wwwroot/[name].min.css"
}),
],
};
Here is the output: 这是输出:
Version: webpack 2.5.1
Time: 322ms
Asset Size Chunks Chunk Names
./wwwroot/app.min.js 2.75 kB 0 [emitted] app
[0] ./Content/jsx/app.jsx 0 bytes {0} [built]
[1] multi ./Content/jsx/app.jsx 28 bytes {0} [built]
Process terminated with code 0.
Add the fallback
option for your ExtractTextPlugin, and css-loader
in your list of loaders. 为您的ExtractTextPlugin添加
fallback
选项,并在css-loader
列表中添加css-loader
。 Install style-loader
with npm install --save-dev style-loader
if you do not have it yet. 如果尚未安装
style-loader
使用npm install --save-dev style-loader
style-loader
进行npm install --save-dev style-loader
。
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'less-loader']
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.