webpack进阶:Less文件的打包和分离

13.CSS进阶:Less文件的打包和分离

打包Less文件

安装:

要使用Less,我们要首先安装Less的服务,当然也是用npm来进行安装

1
npm install --save-dev less

还需要安装Less-loader用来打包使用。

1
npm install --save-dev less-loader

写loader配置:
安装好后,需要在webpack.config.js里编写loader配置,当然要想正确解析成CSS,还是需要style-loader和css-loader的帮助,但是这两个loader前边已经讲过了,所以在这里就不重复了,如果你还对这两个loader不熟悉,那自行回去补前边的第五节吧。

webpack.config.js

1
2
3
4
5
6
7
8
9
10
{
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
}]
}

编写一个less文件

现在webpack的配置好了,我们还需要编写一个less文件,这里明文为black.less.里边只做一件是就是把一个层的背景设置成黑色。

black.less

1
2
3
4
@base :#000;
#foo{
color:@base;
}

这里#gogo是层的ID名称。@base是我们设置的变量名称。
引入到我们entery.js文件中

1
import less from './css/black.less';

这样我们就可以把less文件进行打包了。我们可以使用webpack命令打包试一试。

14.CSS进阶:SASS文件的打包和分离

安装SASS打包的loader

这里需要 在项目目录下用npm安装两个包。node-sass和sass-loader

node-sass:因为sass-loader依赖于node-sass,所以需要先安装node-sass

1
npm install --save-dev node-sass

sass-loader:

1
npm install --save-dev sass-loader

注意:在用npm安装时,这个loader很容易安装失败,最好使用cnpm来进行安装。如果你安装一直报错,最好是把node_modules文件夹删除后,再重新安装。

编写loader配置

1
2
3
4
5
6
7
8
9
10
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}

需要注意的是loader的加载要有先后顺序。

Sass文件的编写

写好loader配置后,就可以愉快的编写sass文件拉,但是不要忘记把sass文件引入到entery.js中。

1
2
3
4
5
6
7
$nav-color: #FFF;
#nav {
$width: 100%;
width: $width;
height:30px;
background-color: $nav-color;
}

15.CSS进阶:自动处理CSS3属性前缀

什么是属性前缀

我们先来看一下代码:

1
2
-webkit-transform: rotate(45deg);
transform: rotate(45deg);

为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。
PostCSS

PostCSS是一个CSS的处理平台,它可以帮助你的CSS实现更多的功能,但是今天我们就通过其中的一个加前缀的功能,初步了解一下PostCSS。

安装

需要安装两个包postcss-loader 和autoprefixer(自动添加前缀的插件)

1
npm install --save-dev postcss-loader autoprefixer

安装好之后直接打包,然后点击css文件里面看,你会发现都自动帮你加好了。

16.CSS进阶:自动处理CSS3属性前缀

消除未使用的css

安装PurifyCSS插件,会总动帮去去除冗余css。

1
npm i purifycss-webpack purify-css --save-dev

引用后配置glob,purifycss-webpack

1
2
3
new PruifyCSSPlugin({
paths:glob.sync(path.join(__dirname,'src/*.html'))
})