詳解vue-cli中配置sass
更新時間:2017年06月21日 14:28:16 作者:Rain-Heart
本篇文章主要介紹了詳解vue-cli中配置sass ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
如何配置sass
一、安裝對應依賴node模塊:
npm install node-sass --save-dev npm install sass-loader --save-dev
二、打開webpack.base.config.js在loaders里面加上
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
三、在用scss的地方寫上
<style lang="scss" scoped="" type="text/css"></style>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue2.0 可折疊列表 v-for循環(huán)展示的實例
今天小編大家分享一篇vue2.0 可折疊列表 v-for循環(huán)展示的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳解如何將 Vue-cli 改造成支持多頁面的 history 模式
本篇文章主要介紹了詳解如何將 Vue-cli 改造成支持多頁面的 history 模式,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11
vue開發(fā)中后臺系統(tǒng)復雜表單優(yōu)化技巧
這篇文章主要為大家介紹了vue開發(fā)中后臺系統(tǒng)復雜表單的優(yōu)化技巧,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07
vue利用openlayers實現(xiàn)動態(tài)軌跡
這篇文章主要為大家介紹了vue利用openlayers實現(xiàn)動態(tài)軌跡,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11
Vue CLI3中使用compass normalize的方法
這篇文章主要介紹了Vue CLI3中使用compass normalize的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
vue組件從開發(fā)到發(fā)布的實現(xiàn)步驟
這篇文章主要介紹了vue組件從開發(fā)到發(fā)布的實現(xiàn)步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11

