vue 项目 main.js 引入的全局 scss 文件，为什么变量和方法都不可用？

[selfcreditgiving]

main.js

import './common/css/base.scss'

base.scss

$testColor: red;

@function getColor() {
  @return red;
}

在别的 vue 里使用 base.scss

<style scoped lang="scss">

/* 这两个都不起作用 */
div {
	background: getColor();
    
}

div {
	background: $testColor;
}




</style>
}

如果直接在 base.scss 中这样写是可以的，说明文件还是全局引入成功了

div {
	background: red;
}

[mrzjd]

https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9

可以参考 vue-cli 的传递 css 预处理器全局配置

[mcfog]

vueloader 在处理 vue 文件的时候并不继承你 main.js 的上下文，而且你用 js 的 import 也一样 sassloader 只会单独处理你的 base，编出 css 后里面的变量和函数已经扔了

你需要在 vue 文件里用 scss 的 @import

[selfcreditgiving]

@mrzjd @mcfog 谢谢二位大佬 ：）明白了，base.scss 会被编译为 css，到 vue 文件那里的时候已经没有 这样的 变量和方法了。如果在 vue 文件中引入 base.scss 的话，就会被合并在一个文件里一起编译，变量和方法也就没问题了。

[selfcreditgiving]

好像 vue-cli 3.0 以上才有 vue.config.js 。 我看了一下自己的 vue-cli 是 2.9.3， 没有这个文件，这样应该怎么配置呢。vue-cli 官网上可以查看过去版本的文档吗

[selfcreditgiving]

vue 2.x 在 build/util.js 中引入发现可以

scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/common/css/base.scss')
}
}
),