詳解Vue 全局引入bass.scss 處理方案
更新時間：2018年03月26日 15:36:45 作者：Bboy_2016
本篇文章主要介紹了詳解Vue 全局引入bass.scss 處理方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
為解決在Vue組件中全局引入 scss 變量及 mixins ，裝載了一個名為 "sass-resources-loader" 解析器。
安裝
$ > cnpm i -D sass-resources-loader
配置
配置的話是在 vue 的 loader 解析器中配置，即在 vue-cli 腳手架方式構(gòu)建出來的文件中是以 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
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vuejs通過filterBy、orderBy實(shí)現(xiàn)搜索篩選、降序排序數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vuejs通過filterBy、orderBy實(shí)現(xiàn)搜索篩選、降序排序數(shù)據(jù)實(shí)例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
隨著前端技術(shù)的發(fā)展,TypeScript 已經(jīng)成為了許多開發(fā)者的首選語言之一,因?yàn)樗峁┝遂o態(tài)類型檢查,可以幫助開發(fā)者在編寫代碼階段就發(fā)現(xiàn)錯誤,本文將詳細(xì)介紹如何在 Vue 3 中配置 TypeScript,需要的朋友可以參考下2024-10-10
vue或css動畫實(shí)現(xiàn)列表向上無縫滾動
這篇文章主要為大家詳細(xì)介紹了vue或css動畫實(shí)現(xiàn)列表向上無縫滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue項(xiàng)目實(shí)現(xiàn)記住密碼到cookie功能示例(附源碼)
本篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)記住密碼到cookie功能示例(附源碼)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
vue項(xiàng)目使用luckyexcel預(yù)覽excel表格功能(心路歷程)
這篇文章主要介紹了vue項(xiàng)目使用luckyexcel預(yù)覽excel表格,我總共嘗試了2種方法預(yù)覽excel,均可實(shí)現(xiàn),還發(fā)現(xiàn)一種方法可以實(shí)現(xiàn),需要后端配合,叫做KKfileview,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
今天小編就為大家分享一篇vue 監(jiān)聽屏幕高度的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
el-form表單el-form-item label不換行問題及解決
這篇文章主要介紹了el-form表單el-form-item label不換行問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了vue實(shí)現(xiàn)聊天框自動滾動的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了Vue路由history模式解決404問題的幾種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue input輸入框中的值如何變成黑點(diǎn)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04