在Typescript & Javascript 中使用Sass变量

本文链接：https://blog.csdn.net/ZY_FlyWay/article/details/113648970

本文介绍如何在Vue项目中利用Sass变量并将其导出供TypeScript使用的方法。通过设置Webpack加载器及适当导出Sass变量，实现样式变量在组件属性中的复用。

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

在Vue中我们往往会单独抽取css全局变量，除了在页面css中使用，往往属性也会用到。

准备

默认安装了：

TypeScript
Sass

如果没有安装可自行安装。

wepack 配置：


module.exports = {
  //...
    module: {
        rules: [
            //...
            {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            }
        ]
    }
};

导出使用

1.导出

可以通过:export进行导出，如下面sass 文件：

$textColor: #333;
$primaryColor: #0F0;
$secondaryColor: #F0F;

// Here's the export you add.
:export {
  textColor: $textColor;
  primaryColor: $primaryColor;
  secondaryColor: $secondaryColor;
}

使用

JavaScript:

可以直接使用import styles from 'yourFileName.scss';

Typescript:

需要一个类型声明，两种方式可以创建。

在webpack cssloader 中添加 typings-for-css-modules-loader.插件会自动定义类型。
手动创建TS声明文件，创建一个 yourFileName.scss.d.ts 文件，内容如下：


export interface I_globalScss {
  primaryColor: string;
  accentColor: string;
  textColor: string;
}

export const styles: I_globalScss;

export default styles;