首頁 > web前端 > js教程 > vue專案中怎麼使用sass配置

vue專案中怎麼使用sass配置

php中世界最好的语言
發布: 2018-04-11 14:02:46
原創
2602 人瀏覽過

這次帶給大家vue專案中怎麼使用sass配置,vue專案中使用sass配置的注意事項有哪些,下面就是實戰案例,一起來看一下。

1、建立一個基於 webpack 範本的新專案

$ vue init webpack myvue
登入後複製

2、在目前目錄下,安裝依賴

$ 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標籤

<style></style>
登入後複製

6、然後運行專案

$ npm run dev
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

vue對storejs取得資料進行處理的步奏詳解

不重啟Vim但重新載入 .vimrc的方法有哪些

以上是vue專案中怎麼使用sass配置的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板