在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
