vue.config.js 中配置全局 scss

module.exports = {
    css: {
        loaderOptions: {
            // 不同 sass-loader 版本对应关键字， v8-: data   v8: prependData   v10+: additionalData
            sass: {
                additionalData: `@import "@/assets/scss/index.scss";`
            },
            scss: {
                additionalData: `@import "@/assets/scss/index.scss";`
            },
        }
    }
}

vue-cli3 直接在 main.js 中引入 scss 文件也可以生效，但如果有单独 mixin.scss，在单页面中使用 mixin 不能生效，所以需要全局配置。

注意：scss 配置后面需要加 分号 ‘;’，否则会报错 Syntax Error: SassError: media query expression must begin with '(' 。