Web前端培训：安装CSS预处理器

　　通过CSS预处理器可以使用专门的编程语言来编写页面的样式，然后编译成正常的CSS文件，供项目使用。CSS预处理器为CSS增加了一些编程的特性，用户无须考虑浏览器的兼容性问题，可以使CSS更加简洁、更具有适用性和可读性、更易于代码的维护。

　　Vue中常用的CSS预处理器包括Less、Sass/SCSS和Stylus，下面我们分别讲解如何进行安装。笔者在这里以Sass/SCSS为例，讲解其具体的安装方式。

　　(1)安装Less，具体命令如下：

   npm install less less-loader -D

　　然后在webpack.config.js文件中添加rules规则，具体代码如下：

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

　　安装后，在页面中使用Less的地方给style标签添加lang属性即可，示例代码如下：

  <style lang="less"></style>

　　(2)安装Sass/SCSS，具体命令如下：

   npm install sass-loader@7.2.x node-sass@4.12.x -D

　　然后在webpack.config.js文件中添加rules规则，具体代码如下：

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

　　安装后，在页面中使用SCSS的地方给style标签添加lang属性即可，示例代码如下：

  <style lang="scss"></style>

　　(3)安装Stylus。Stylus来源于Node.js社区，与JavaScript关系比较密切。与Less和Sass/SCSS不同的是，Stylus安装完成之后，在Vue 2X中不需要配置就可以直接使用。具体安装命令如下：

   npm install stylus stylus-loader -D

　　安装后，在页面中使用Stylus的地方给style标签添加lang属性即可，示例代码如下：

   <style lang="stylus"></style>