1.css文件的配置
如果要在打包的时候,将前端用到的css样式文件一起打包,需要安装相应的loader。
新建一个main.css
body{
background-color: #0000aa;
}
在main.js中添加如下代码,引用该css文件
require('./css/main.css')
如果直接通过nmp run build打包,会报错,需要安装相应的loader。
首先,安装css-loader
通过命令:npm install --save-dev css-loader,安装开发版的css-loader。
执行完成后,在package.json的devDependencies节点中,会自动添加css-loader和相应的版本。
在webpack.config.js的module.exports中需要添加module配置信息:
module: {
rules: [
{
//css-loader负责css文件的加载
//style-loader负责将样式渲染到dom
//从右到左,先加载css-loader再加载style-loader
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
可以看到除了css-loader还有style-loader。 css-loader负责css文件的加载,style-loader负责将样式渲染到dom,因此,还要安装style-loader。use: [ 'style-loader', 'css-loader' ]配置中style-loader在左,css-loader在右,但是加载的顺序是从右到左,先加载css-loader再加载style-loader。
通过命令:npm install style-loader --save-dev ,安装开发版的style-loader。
安装完成后,main.css就可以正常打包了。
2.less文件的配置
如果样式文件采用的是less文件,同样也需要安装相应的loader。
新建一个common.less
@fontSize:22px;
@fontColor:white;
body{
font-size:@fontSize;
color:@fontColor;
}
在main.js 中引用这个less文件
require('./css/common.less')
安装less-loader和less
通过命令:npm install --save-dev less-loader less ,安装less-loader和less
安装完成后,在webpack.config.js中添加如下配置:
{
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
}]
}
完整的webpack.config.js配置如下:
const path = require('path');
module.exports={
//打包的入口,可以是字符串,数组,对象,可以是相对路径
entry:'./src/main.js',
//出口通常为一个对象,至少要包含path和filename两个属性,必须是绝对路径
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module: {
rules: [
{
//css-loader负责css文件的加载
//style-loader负责将样式渲染到dom
//从右到左,先加载css-loader再加载style-loader
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
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
}]
}
]
}
};
通过npm run build命令打包,报错
问题主要出在common.less的打包, 可能是less或者less-loader版本的问题,因为webpack安装的时候,指定了低版本。
指定下less-loader和less的版本,重新安装,执行命令:npm install --save-dev less-loader@4.1.0 less@3.9.0
完成后,重新打包,问题解决。
运行后效果如下:main.css和common.less都起作用了。