在vue項目中使用sass的配置方法

發(fā)布時間：2020-09-15 01:37:31 來源：腳本之家閱讀：364 作者：Jarvan大熊欄目：web開發(fā)

1、創(chuàng)建一個基于 webpack 模板的新項目

$ vue init webpack myvue

2、在當(dāng)前目錄下，安裝依賴

$ cd myvue
$ npm install

3、安裝sass的依賴包

npm install --save-dev sass-loader
//sass-loader依賴于node-sass
npm install --save-dev node-sass

4、在build文件夾下的webpack.base.conf.js的rules里面添加配置

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

如下圖所示：

在vue項目中使用sass的配置方法

5、在APP.vue中修改style標(biāo)簽

<style lang="scss">

6、然后運行項目

$ npm run dev

7、修改APP.vue的樣式，可以看下效果

在vue項目中使用sass的配置方法

8、運行結(jié)果背景變成灰色嗎，說明你已成功配置好sass

在vue項目中使用sass的配置方法

總結(jié)

以上所述是小編給大家介紹的在vue項目中使用sass的配置方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

猜你喜歡