vue2項(xiàng)目使用sass的示例代碼
更新時(shí)間：2017年06月28日 11:35:27 作者：每天都要進(jìn)步一點(diǎn)點(diǎn)
本篇文章主要介紹了vue項(xiàng)目使用sass的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
1，使用save會在package.json中自動(dòng)添加。
npm install node-sass --save-dev npm install sass-loader --save-dev
注：
通常使用npm安裝會出現(xiàn)以下報(bào)錯(cuò)，安裝失敗。（網(wǎng)路問題）
可以通過淘寶的npm鏡像安裝node-sass，解決以上問題。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org （安裝淘寶鏡像） $ cnpm install node-sass --save （使用淘寶鏡像安裝node-sass）
2.進(jìn)入webpack.base.config.js 配置scss module -- loaders (vue1.0)
$ npm install --save-dev sass-loader style-loader css-loader
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': 'style-loader!css-loader!sass-loader'
}
}
}
打開webpack.base.config.js在loaders里面加上 module -- rules (vue2.0)
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]')
}
}
]
}
3.如果需要在vue文件style標(biāo)簽使用scss的話，需要聲明一下：
vue1.0
<style rel="stylesheet/scss" lang="scss"></style>
vue2.0
<style lang="scss" scoped="" type="text/css"></style>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue仿寫帶過渡效果的下拉菜單功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
vue-cli+webpack項(xiàng)目打包到服務(wù)器后,ttf字體找不到的解決操作
這篇文章主要介紹了vue-cli+webpack項(xiàng)目打包到服務(wù)器后,ttf字體找不到的解決操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue2 mint-ui loadmore實(shí)現(xiàn)下拉刷新,上拉更多功能
這篇文章主要介紹了vue2 mint-ui loadmore實(shí)現(xiàn)下拉刷新,上拉更多功能,需要的朋友可以參考下2018-03-03
vue中input獲取光標(biāo)位置并追加內(nèi)容
這篇文章主要給大家介紹了關(guān)于vue中input獲取光標(biāo)位置并追加內(nèi)容的相關(guān)資料,vue通過當(dāng)前的光標(biāo)來進(jìn)行插值,從而需要去獲取光標(biāo)所在的位置,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue正確使用watch監(jiān)聽屬性變化方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Luckysheet ，一款純前端類似excel的在線表格，功能強(qiáng)大、配置簡單、完全開源，這篇文章主要介紹了Vue-Luckysheet的使用方法,需要的朋友可以參考下2022-08-08
你了解vue3.0響應(yīng)式數(shù)據(jù)怎么實(shí)現(xiàn)嗎
這篇文章主要介紹了你了解vue3.0響應(yīng)式數(shù)據(jù)怎么實(shí)現(xiàn)嗎，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過程,也就是new Vue() 開始就是vue生命周期的開始。Vue 實(shí)例有?個(gè)完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列過程,稱這是Vue的?命周期2022-10-10
Vue使用Antd中a-table實(shí)現(xiàn)表格數(shù)據(jù)列合并展示示例代碼
文章介紹了如何在Vue中使用Ant?Design的a-table組件實(shí)現(xiàn)表格數(shù)據(jù)列合并展示,通過處理函數(shù)對源碼數(shù)據(jù)進(jìn)行操作,處理相同數(shù)據(jù)時(shí)合并列單元格2024-11-11
這篇文章主要介紹了基于Vue中的父子傳值問題解決，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-10-10