如何在JavaScript和Sass中实现变量共享？

本文共计609个文字，预计阅读时间需要3分钟。

在环境间共享变量是编程的圣杯。以下是在JavaScript和Sass（或CSS）之间共享变量的方法。随着大型单页应用程序的兴起，JavaScript和CSS越来越紧密地结合在一起。通常，在两个值之间复制的值是在两个值之间复制的值。

在环境之间共享变量是编程的圣杯。以下是在Javascript和

Sass（或CSS！）之间共享变量的方法。

随着大型单页应用程序的兴起，Javascript和CSS越来越交织在一起。通常在两个值之间复制值（例如，与React的CSSTransitionGroup一起使用的动画持续时间或将品牌颜色传递到图形库中）。但是，保持两个具有相同值的副本不可避免地导致仅更新一个副本并最终导致令人沮丧的错误。幸运的是，使用webpack和CSS模块，有更好的方法。在此博客文章中，我们将通过上述示例为共享动画持续时间，探讨如何在脚本和样式之间共享变量CSSTransitionGroup。

第一步是安装我们的依赖项：

npm install sass-loader node-sass webpack --save-dev

接下来，我们需要配置webpack以便使用，sass-loader以便我们可以从Javascript访问我们的Sass代码。

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

现在开始有趣的部分。