Web前端培訓(xùn)：安裝CSS預(yù)處理器

　　通過CSS預(yù)處理器可以使用專門的編程語言來編寫頁面的樣式，然后編譯成正常的CSS文件，供項目使用。CSS預(yù)處理器為CSS增加了一些編程的特性，用戶無須考慮瀏覽器的兼容性問題，可以使CSS更加簡潔、更具有適用性和可讀性、更易于代碼的維護。

　　Vue中常用的CSS預(yù)處理器包括Less、Sass/SCSS和Stylus，下面我們分別講解如何進行安裝。筆者在這里以Sass/SCSS為例，講解其具體的安裝方式。

　　(1)安裝Less，具體命令如下：

   npm install less less-loader -D

　　然后在webpack.config.js文件中添加rules規(guī)則，具體代碼如下：

  { 
     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規(guī)則，具體代碼如下：

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

　　安裝后，在頁面中使用SCSS的地方給style標簽添加lang屬性即可，示例代碼如下：

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

　　(3)安裝Stylus。Stylus來源于Node.js社區(qū)，與JavaScript關(guān)系比較密切。與Less和Sass/SCSS不同的是，Stylus安裝完成之后，在Vue 2X中不需要配置就可以直接使用。具體安裝命令如下：

   npm install stylus stylus-loader -D

　　安裝后，在頁面中使用Stylus的地方給style標簽添加lang屬性即可，示例代碼如下：

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