Javascript 与 Sass 共享变量解决方案

随着大型单页应用程序的兴起，Javascript和CSS越来越紧密地交织在一起。通常情况下，我们会在js与scss中分别维护两份变量。然而，在开发过程中有时会只更新一处而忘记维护另一份配置变量，并最终导致令人沮丧的bug。

幸运的是，有了webpack和CSS模块，就可以解决这个问题。在这篇博客文章中，我们将探讨如何在脚本和样式之间共享变量。

 

 

如果你使用的是vue-cli，可以省略以下两步

第一步，安装依赖

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

 

第二步，配置loader

我们需要在webpack配置文件中添加sass-loader，这样我们就可以从Javascript访问sass代码。

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

 

第三步，导出sass变量

现我们在Sass中定义实际的变量值并将其导出到Javascript。CSS模块有一个叫做：export的程序。export指令的工作原理基本上与ES6的export关键字类似。Sass代码将导出一个对象，其中包含要在Javascript中使用的变量名及其关联值。这些值都以字符串的形式导出。

// 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程序中引入scss文件

现在，在Javascript中，我们只需要从样式表导入样式

// js/animation.js
import styles from '../styles/animation.scss'

...

export default {
  data() {
    return {
      animationMillis: styles.animationMillis // 这里就是我们导出的样式变量
    }
  }
}

...

 

至此，你就可以实现在js和sass中共享变量了

 

参考：https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass