詳解Vue 全局引入bass.scss 處理方案
更新時(shí)間：2018年03月26日 15:36:45 作者：Bboy_2016
本篇文章主要介紹了詳解Vue 全局引入bass.scss 處理方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
為解決在Vue組件中全局引入 scss 變量及 mixins ，裝載了一個(gè)名為 "sass-resources-loader" 解析器。
安裝
$ > cnpm i -D sass-resources-loader
配置
配置的話是在 vue 的 loader 解析器中配置，即在 vue-cli 腳手架方式構(gòu)建出來(lái)的文件中是以 build/utils.js，在該文件中定義了 cssLoaders() 方法，該方法定義了諸如 css、less的解析方式，具體如下。
// build/utils.js
exports.cssLoaders = function (options) {
options = options || {}
...
return {
// ...
sass: generateLoaders('sass', { indentedSyntax: true }),
// 定義在這里 =======================》
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/common/style/global.scss') // 需要全局引入的文件
}
}
),
// 定義在這里 =======================》
// ...
}
}
// global.scss
@mixin line-height($height) {
height: $height;
line-height: $height;
}
$head-height: .45rem;
// xx.vue
<style lang="scss">
height: @include line-height(45px);
</style>
建議
在 global.scss 中只需要定義變量 或者是 mixins （混合）。
參考
https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中import與@import的區(qū)別及使用場(chǎng)景說(shuō)明
這篇文章主要介紹了Vue中import與@import的區(qū)別及使用場(chǎng)景說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
在最近一個(gè)項(xiàng)目的后臺(tái)管理系統(tǒng)中，寫前端界面時(shí)用到了ElementUI，但是發(fā)現(xiàn)導(dǎo)入數(shù)據(jù)表格之后表頭的高度一直很高，那么如何解決，本文就來(lái)詳細(xì)的介紹一下2021-09-09
vue實(shí)現(xiàn)將一個(gè)數(shù)組內(nèi)的相同數(shù)據(jù)進(jìn)行合并
今天小編就為大家分享一篇vue實(shí)現(xiàn)將一個(gè)數(shù)組內(nèi)的相同數(shù)據(jù)進(jìn)行合并，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了antd Form組件表單在vue3中的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
VUE跨域問(wèn)題Access to XMLHttpRequest at
今天發(fā)現(xiàn)一個(gè)錯(cuò)誤，VUE發(fā)送請(qǐng)求的時(shí)候不能請(qǐng)求到正確數(shù)據(jù)，VUE跨域問(wèn)題Access to XMLHttpRequest at，本文就詳細(xì)的來(lái)介紹一下解決方法，感興趣的可以了解一下2022-05-05
這篇文章主要為大家詳細(xì)介紹了IntelliJ IDEA編輯器配置vue高亮顯示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
VuePress在build打包時(shí)window?document?is?not?defined問(wèn)題解決
這篇文章主要為大家介紹了VuePress在build打包時(shí)window?document?is?not?defined問(wèn)題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
圖表在我們的項(xiàng)目中可以幫我們很明確的看到我們想要看到的數(shù)據(jù)，本文將主要介紹Echart圖表在項(xiàng)目中前后端使用的詳細(xì)教程，感興趣的同學(xué)可以學(xué)習(xí)一下2021-11-11
最近在vue3項(xiàng)目中通過(guò)three.js實(shí)現(xiàn)了實(shí)際的三維效果demo,下面這篇文章主要給大家介紹了關(guān)于在vue中使用three.js的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue中 this.$set的用法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09