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'))
})