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 '(' 。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容