跳到主要内容

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
    }]
}

1.png

编写一个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配置方法。

2.png

配置好后，你会发现less被分离到了index.css文件里。

总结​

Less是非常好的CSS扩展，但是Less得转换稍显麻烦，好的是webpack为我们提供了简单轻松的转换方法。