在main.js和app.vue中引入混入后，並不能直接在全局使用
要使混入全局聲明，可以在vue.config.js中配置（方法2實證可行）
a.方法1
如果使用的是vue-cli的版本是比較低的版本，我們可以通過使用 sass-resources-loader這個插件，修改vue-cli的目錄下build/utils.js 。從而實現scss文件的共享。
步驟1：首先安裝sass-resources-loader這個插件。
|
1
|
npm i sass-resources-loader --save-dev
|
步驟2：修改build文件夾下的utils.js文件,找到return選項，修改它的scss屬性進行入下配置，其他不用改變。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
return
{
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders(
'less'
),
sass: generateLoaders(
'sass'
, { indentedSyntax:
true
}),
//修改這個scss屬性
scss: generateLoaders(
'sass'
).concat({
loader:
'sass-resources-loader'
,
options:{
resources:[
path.resolve(__dirname,
'../src/assets/variable.scss'
),
path.resolve(__dirname,
'../src/assets/mixin.scss'
),
path.resolve(__dirname,
'../src/assets/base.scss'
)
]
}
}),
stylus: generateLoaders(
'stylus'
),
styl: generateLoaders(
'stylus'
)
}
|
步驟3：測試階段，新建一個Test.vue組件，進行入下配置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<template>
<div>
<!-- test類的默認樣式 -->
<div class=
"test"
>
test
</div>
<div class=
"box2"
>
ssss
</div>
</div>
</template>
<style lang=
"scss"
>
.test{
//訪問公共的scss變量
font-size:$tsize;
background: $bg;
}
.box2{
//訪問公共的scss混入
@include wh($w2,$h2)
}
</style>
|
b.方法2
如果使用的vue-cli的版本是高版本的，那么可以直接修改vue.config.js這個文件的css.loaderOptions選項，就可以讓每個組件使用公用的scss文件了。
步驟1：同樣首先安裝sass-resources-loader這個插件。
|
1
|
npm i sass-resources-loader --save-dev
|
步驟2：在項目主目錄下新建一個vue.config.js配置文件。大概的配置參考這篇文章
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
const path=require(
'path'
)
module.exports={
publicPath: process.env.NODE_ENV ===
'production'
?
'/public/'
:
'./'
,
assetsDir:
'assets'
,
indexPath:
'myIndex.html'
,
filenameHashing:
false
,
productionSourceMap:
false
,
css: {
loaderOptions: {
sass: {
//依次導入的公用的scss變量，公用的scss混入，共用的默認樣式
prependData: `
@import
"./src/assets/css/variable.scss"
;
@import
"./src/assets/css/mixin.scss"
;
@import
"./src/assets/css/base.scss"
;
`
}
}
}
}
|
步驟3：測試階段，和方法一的步驟3一樣。
c.方法3
如果使用的vue-cli的版本是高版本的，那么可以直接修改vue.config.js這個文件的chainWebpack這個屬性來實現多個scss文件的公用。
步驟1：同樣首先安裝sass-resources-loader這個插件。
|
1
|
npm i sass-resources-loader --save-dev
|
步驟2：在項目主目錄下新建一個vue.config.js配置文件。大概的配置參考這篇文章
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
const path=require(
'path'
)
module.exports={
publicPath: process.env.NODE_ENV ===
'production'
?
'/public/'
:
'./'
,
assetsDir:
'assets'
,
indexPath:
'myIndex.html'
,
filenameHashing:
false
,
productionSourceMap:
false
,
chainWebpack:config=>{
const types=[
'vue'
]
types.forEach(type=>{
config.module.rule(
'scss'
).oneOf(type).use(
'style-resource'
)
.loader(
'style-resources-loader'
)
.options({
patterns:[
//公用的scss變量
path.resolve(__dirname,
'./src/assets/css/variable.scss'
),
//公用的scss混入
path.resolve(__dirname,
'./src/assets/css/mixin.scss'
),
//共用的默認樣式
path.resolve(__dirname,
'./src/assets/css/base.scss'
)
]
})
})
}
}
|
引用自https://www.jb51.net/article/175576.htm