詳解Vue2 添加對scss的支持
更新時間：2019年01月02日 09:59:29 作者：心葉
這篇文章主要介紹了詳解Vue2 添加對scss的支持，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
引入loader
cnpm install node-sass --save-dev cnpm install sass-loader --save-dev cnpm install style-loader --save-dev
scss支持
為了使用scss，我們需要先安裝相關(guān)的node包：
npm install --save style-loader sass-loader node-sass file-loader
安裝好之后，為了可以在.vue和.scss中使用，需要在webpack.config.js中配置對應(yīng)的解析器：
var webpack = require('webpack');
module.exports = {
entry: ['./src/entry.js'],
output: {
path: __dirname,
filename: 'build/main.js'
},
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
module: {
loaders: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'style-loader!css-loader!sass-loader'
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
}, {
test: /\.scss$/,
loader: ['style-loader', 'css-loader', 'sass-loader']
}, {
test: /\.(png|jpg|jpeg|gif|bmp)$/,
loader: ['file-loader?limit=7000&name=build/assets/[name].[ext]']
}
]
}
};
關(guān)于上面resolve的配置，是因為編譯和打包源文件默認(rèn)不一樣。
測試scss
打開PageTwo.vue測試一下：
<style lang="scss" scoped>
section {
& > div {
font-size: 20px;
}
}
</style>
編譯正常。
本篇最終項目文件Github地址：github.com/yelloxing/vue.quick/tree/V6
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue批量圖片顯示時遇到的路徑被解析問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作
這篇文章主要介紹了vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue3關(guān)于時間顯示格式化的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue 子組件更新props中的屬性值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue-cli(vue腳手架方式搭建),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
詳解基于 axios 的 Vue 項目 http 請求優(yōu)化
這篇文章主要介紹了詳解基于 axios 的 Vue 項目 http 請求優(yōu)化,非常具有實用價值，需要的朋友可以參考下2017-09-09
vue 解決無法對未定義的值,空值或基元值設(shè)置反應(yīng)屬性報錯問題
這篇文章主要介紹了vue 解決無法對未定義的值,空值或基元值設(shè)置反應(yīng)屬性報錯問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue 3中的defineEmits()和defineProps()使用小結(jié)
defineProps()和defineEmits()是Vue 3中Composition API的重要組成部分,它們分別用于定義組件接收的屬性和觸發(fā)的事件,本文給大家介紹Vue 3中的defineEmits()和defineProps()解析,感興趣的朋友跟隨小編一起看看吧2024-04-04
vue-router的安裝不是理想化的,會出現(xiàn)問題,需要靜下心認(rèn)真研究,熬過去就會懂得更多,這篇文章主要給大家介紹了關(guān)于vue2安裝vue-router報錯的解決方法,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了在vue中實現(xiàn)嵌套頁面(iframe)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07