在Typescript & Javascript 中使用Sass变量

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

准备

---

默认安装了：

• TypeScript
• Sass

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

wepack 配置：

代码语言：javascript复制

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

导出使用

---

1.导出

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

代码语言：javascript复制

$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:

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

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

代码语言：javascript复制

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

export const styles: I_globalScss;

export default styles;

然后可以 import styles from 'yourFileName.scss';使用。

参考： https://mattferderer.com/use-sass-variables-in-typescript-and-javascript

css sass java javascript typescript

0 人点赞