提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

webpack less-loader

webpack Less loader
2023-06-13 09:16:41 时间

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',],
      },
    ],
  },
};

于是我们发现了，如下报错。

于是，我们调换一下二者的顺序后，再执行编译，编译成功。

 use: ['style-loader','css-loader'],

loader的加载顺序是从右边开始的，如果换行了就是从下开始执行的

然后再看一下我们的页面效果，颜色已经添加上了。

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

可以发现报错了，首先less文件(或scss文件)都是需要先转为css文件才可以使用的，就跟typescript会先被转为javascript才可以执行一个道理。

less

我们将less安装到开发依赖中

npm i less -D

安装完成后我们执行，如下命令去执行一下less的编译

npx less ./src/css/login.less

可以看到，less文件被编译成如下的css写法。这里并没有编译成其他文件

我们也可以指定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 -D

webpack.config

记住我们刚才loader执行的顺序，从右开始。我们需要less解析为css，所以这里先用到less-loader，此时就是一个css文件了，然后就需要css-loader来解析了，最后还需要style-loader

      {
          test: /\.less$/,
          use:['style-loader','css-loader','less-loader']
      }

最后执行一下打包，我们less中的样式和css中的样式都加载进来了。

相关文章