webpack less-loader
style-loader
npm i install style-loader配置style-loader
对于css文件来说，只使用css-loader处理，是不够的，因此我们还需要style-loader进行处理。
loader的执行顺序
如下，我们在 css-loader后加上style-loader。然后执行npm run build
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'build.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
// 是一个正则表达式
test: /\.css$/,
use: ['css-loader','style-loader',],
},
],
},
};于是我们发现了，如下报错。
image.png
于是，我们调换一下二者的顺序后，再执行编译，编译成功。
use: ['style-loader','css-loader'],loader的加载顺序是从右边开始的，如果换行了就是从下开始执行的
然后再看一下我们的页面效果，颜色已经添加上了。
image.png
less-loader
很多项目中，css不足以满足我们的需要，因此就出现了less和sass。我们看一下less的配置。
新建login.less
注意颜色不能是字符串，不需要引号
// login.less
@bgColor:seagreen;
@fontSize:100px;
//
.title{
background-color: @bgColor;
font-size: @fontSize;
}在login.js中引用
import './css/login.css'
import './css/login.less'
function login(){
const oH2 = document.createElement('h2')
oH2.innerHTML = '我的天啊'
oH2.className = 'title'
return oH2
}
document.body.appendChild(login())然后我们尝试执行一下打包命令 npm run build
image.png
可以发现报错了，首先less文件(或scss文件)都是需要先转为css文件才可以使用的，就跟typescript会先被转为javascript才可以执行一个道理。
less
我们将less安装到开发依赖中
npm i less -D安装完成后我们执行，如下命令去执行一下less的编译
npx less ./src/css/login.less可以看到，less文件被编译成如下的css写法。这里并没有编译成其他文件
image.png
我们也可以指定less编译后的输出文件。
// npx less 输入文件 输出文件
npx less ./src/css/login.less ./src/css/index.css 有了less之后，打包其实还是会报错，因为需要less-loader去解析。
less-loader
同样，less-loader也安装到开发依赖(devDependencies)中
npm i less-loader -Dwebpack.config
记住我们刚才loader执行的顺序，从右开始。我们需要less解析为css，所以这里先用到less-loader，此时就是一个css文件了，然后就需要css-loader来解析了，最后还需要style-loader
{
test: /\.less$/,
use:['style-loader','css-loader','less-loader']
}最后执行一下打包，我们less中的样式和css中的样式都加载进来了。
image.png
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-06-19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录