vue-cli4.x 使用 scss 全局变量设置使用

 

相关配置

在安装完相关依赖后，需要在 vue.config.js 中进行相关配置，重点配置路径。 路径后面的 ;是必须的

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "./src/assets/styles/base";`,
            },
        },
    },
}

在需要使用全局样式的地方，就可以进行使用 base.scss 文件中定义的样式。但是得注意在 加 lang="scss"

使用

logo.vue 文件中使用。

<style lang="scss" scoped>
.logo {
    float: left;
    height: $header-height;
}
</style>