Share Variables Between Javascript and Sass

以下分别是在webpack和vite中，怎么在js和sass中共享变量

webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
}

使用css中的:export，其作用类似ES6中的export

// styles/animation.scss
$animation-length: 250;
$animation-length-ms: $animation-length + 0ms;

:export {
  animationMillis: $animation-length-ms;
}

.component-enter {
  ...

  transition: all $animation-length-ms ease-in;
}

在js中按照ESM模块导入使用即可

// js/animation.js
import styles from '../styles/animation.scss'
const millis = parseInt(styles.animationMillis)

vite

vite提供对.scss, .sass, .less, .styl 和 .stylus 文件的内置支持，因此不需要安装插件，但是需要安装相应的预处理依赖

# .scss and .sass
npm add -D sass

# .less
npm add -D less

# .styl and .stylus
npm add -D stylus

（npm add是npm install的别名）

在vite中，以 .module.css 为后缀名的 CSS 文件才会被认为是一个 CSS modules 文件。导入这样的文件会返回一个相应的模块对象

/* styles/animation.module.scss*/
$animation-length: 250;
$animation-length-ms: $animation-length + 0ms;
 
:export {
  animationMillis: $animation-length-ms;
}
 
.component-enter {
  ...
 
  transition: all $animation-length-ms ease-in;
}

// js/animation.js
import styles from '../styles/animation.scss'
const millis = parseInt(styles.animationMillis)