V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
selfcreditgiving
V2EX  ›  问与答

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

  •  
  •   selfcreditgiving · 2019-09-12 09:41:23 +08:00 · 2525 次点击
    这是一个创建于 1881 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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;
    }
    
    5 条回复    2019-09-12 10:44:16 +08:00
    mrzjd
        1
    mrzjd  
       2019-09-12 09:48:35 +08:00
    mcfog
        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
    selfcreditgiving
        3
    selfcreditgiving  
    OP
       2019-09-12 10:04:46 +08:00
    @mrzjd @mcfog 谢谢二位大佬 :)明白了,base.scss 会被编译为 css,到 vue 文件那里的时候已经没有 这样的 变量和方法了。如果在 vue 文件中引入 base.scss 的话,就会被合并在一个文件里一起编译,变量和方法也就没问题了。
    selfcreditgiving
        4
    selfcreditgiving  
    OP
       2019-09-12 10:25:49 +08:00
    好像 vue-cli 3.0 以上才有 vue.config.js 。 我看了一下自己的 vue-cli 是 2.9.3, 没有这个文件,这样应该怎么配置呢。vue-cli 官网上可以查看过去版本的文档吗
    selfcreditgiving
        5
    selfcreditgiving  
    OP
       2019-09-12 10:44:16 +08:00
    vue 2.x 在 build/util.js 中引入发现可以

    scss: generateLoaders('sass').concat(
    {
    loader: 'sass-resources-loader',
    options: {
    resources: path.resolve(__dirname, '../src/common/css/base.scss')
    }
    }
    ),
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3144 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:46 · PVG 20:46 · LAX 04:46 · JFK 07:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.