Hazel Wu | 22'mm

Vue 自動化導入 SASS Mixin

2020-01-15

專案需要導入全域的 Mixin,以下會介紹要怎麼設定。專案使用的是Vue CLI 3建立的,因此需要自行建立一個vue.config.js檔來修改Webpack設定

官方Vue文件的自动化导入說明,我們可以用style-resourses-loader來加載mixin、color等需要全域使用的CSS檔。

安裝 style-resources-loader

1
npm install style-resources-loader

接著在專案目錄最外層新增vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// vue.config.js
const path = require('path');

module.exports = {
chainWebpack: config => {
const oneOfsMap = config.module.rule('scss').oneOfs.store
oneOfsMap.forEach(item => {
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
// 單隻檔案引入
resources: [path.resolve(__dirname, './src/style/mixin.scss')],

// 多檔案引入
// resources: ['./path/to/vars.scss', './path/to/mixins.scss']
})
.end()
})
}
}

設定完後,重新啟動npm run serve,即可不用個別在component引入mixin.scss,也可以使用@include了

Reference