更新時(shí)間:2022-10-28 來源:黑馬程序員 瀏覽量:
通過CSS預(yù)處理器可以使用專門的編程語言來編寫頁面的樣式,然后編譯成正常的CSS文件,供項(xiàng)目使用。CSS預(yù)處理器為CSS增加了一些編程的特性,用戶無須考慮瀏覽器的兼容性問題,可以使CSS更加簡潔、更具有適用性和可讀性、更易于代碼的維護(hù)。
Vue中常用的CSS預(yù)處理器包括Less、Sass/SCSS和Stylus,下面我們分別講解如何進(jìn)行安裝。筆者在這里以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標(biāo)簽添加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標(biāo)簽添加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標(biāo)簽添加lang屬性即可,示例代碼如下:
<style lang="stylus"></style>