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;
}
1
mrzjd 2019-09-12 09:48:35 +08:00
|
2
mcfog 2019-09-12 09:49:03 +08:00 via Android 1
vueloader 在处理 vue 文件的时候并不继承你 main.js 的上下文,而且你用 js 的 import 也一样 sassloader 只会单独处理你的 base,编出 css 后里面的变量和函数已经扔了
你需要在 vue 文件里用 scss 的 @import |
3
selfcreditgiving OP |
4
selfcreditgiving OP 好像 vue-cli 3.0 以上才有 vue.config.js 。 我看了一下自己的 vue-cli 是 2.9.3, 没有这个文件,这样应该怎么配置呢。vue-cli 官网上可以查看过去版本的文档吗
|
5
selfcreditgiving OP vue 2.x 在 build/util.js 中引入发现可以
scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/common/css/base.scss') } } ), |