利用Sass实现js和css变量共享

js和css变量共享实践

• 在src/styles/variables.js创建要共享的变量

// src/styles/variables.js
module.exports = {
  // 主颜色
  'primary-color': '#0C4CFF',
  // 出错颜色
  'error-color': '#F15533',
  // 成功颜色
  'success-color': '#35B34A',
};

• 添加Webpack配置，注入变量到Sass中

// vue.config.js
const styleVariables = require('src/styles/variables');

module.exports = {
  css: {
      loaderOptions: {
        // 给 sass-loader 传递选项
        sass: {
          data:
            `@import "@/assets/styles/_mixins.sass", "@/assets/styles/_extends.sass"\n` +
            Object.keys(styleVariables)
              .map(type => {
                const item = styleVariables[type]
                return Object.keys(item)
                  .map(modifier => {
                    return `$${type}-${modifier}: ${item[modifier]}`
                  })
                  .join('\n')
              })
              .join('\n')
        }
      }
    }
}

• 在页面中使用变量

<style lang="sass" scoped>
.button
  background: $primary-color
</style>

参考文档

• 给2019前端的5个建议-JS 和 CSS 变量共享
• JS和CSS变量共享、主题颜色设置