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

This topic created in 2434 days ago, the information mentioned may be changed or developed.

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;
}

scss

Vue

background

5 replies • 2019-09-12 10:44:16 +08:00

mrzjd

Sep 12, 2019

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

Sep 12, 2019 via Android

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

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

selfcreditgiving

Sep 12, 2019

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

selfcreditgiving

Sep 12, 2019

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

selfcreditgiving

Sep 12, 2019

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

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