在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