配置sass全局变量Undefined variable: “$theme-color“.

最新推荐文章于 2025-06-26 17:31:50 发布

yrfjygb

最新推荐文章于 2025-06-26 17:31:50 发布

阅读量8.1k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/yrfjygb/article/details/118491232

这篇博客介绍了在Sass从旧版本升级到v8时，配置中导入CSS变量的方法变化。之前使用`data`选项导入 `_variable.scss` 文件，而在新版本中，需要改用`prependData`选项来实现相同的功能。此外，配置文件还展示了如何设置Webpack的别名以优化路径引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原因：sass版本不同选项不同

sass v8 版本使用 prependData

module.exports = {
    css: {
        loaderOptions: {
           sass: {
                    prependData: `@import "assets/css/_variable.scss";`   
                }
           }
    },
    configureWebpack: {
        resolve: {
            alias: {
                'common': '@/common',
                'components': '@/components',
                'views': '@/views',
                'network': '@/network',
                'assets': '@/assets'
            }
        }
    }
}

之前的版本使用：

module.exports = {
    css: {
        loaderOptions: {
           sass: {
                    data: `@import "assets/css/_variable.scss";`   
                    // sass v8版本使用这个  prependData
                }
           }
    },
    configureWebpack: {
        resolve: {
            alias: {
                'common': '@/common',
                'components': '@/components',
                'views': '@/views',
                'network': '@/network',
                'assets': '@/assets'
            }
        }
    }
}