16-CSS中Less文件打包和分离
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。也就是说Less给我们枯燥单一的样式文件加入了编程机制,这让我们这些前端程序员很受用,所以在工作中大部分程序员都使用了Less开发。
安装
要使用Less,我们要首先安装Less的服务,当然也是用npm来进行安装。
npm install --save-dev less
还需要安装Less-loader用来打包使用。
npm i install --save-dev less-loader
loader配置
安装好后,需要在webpack.config.js里编写loader配置,当然要想正确解析成CSS,
还是需要style-loader
和css-loader
做最后的处理.
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
编写一个less文件
现在webpack的配置好了,我们还需要编写一个less文件,举个例子,新建一个less文件black.less
,里边只做一件是就是把一个层的背景设置成黑色。
@base: #f00;
body {
background-color: @base;
}
这里body是标签名称。@base是我们设置的变量名称。
引入到我们entery.js文件中
import "./less/index.less"
这样我们就可以把less文件进行打包了。我们可以使用webpack命令打包试一试。 把Lees文件分离。 我们之前讲了extract-text-webpack-plugin这个插件,想把Less文件分离出来的方法跟这个几乎一样,之前的我们在第12节中讲过,这里只看less的loader配置方法。
配置好后,你会发现less被分离到了index.css文件里。
总结
Less是非常好的CSS扩展,但是Less得转换稍显麻烦,好的是webpack为我们提供了简单轻松的转换方法。