javascript - 是否可以将 Sass 变量传递给 Laravel/Blade/JS？

Question

我正在尝试将 Sass 中使用的变量转移到 Laravel/Blade/JS，以便我可以使用在一个位置定义的一个变量来跨用于维护网站的各种语言维护某些内容。

是否可以将 Sass 变量传递给 Laravel/Blade/JS，这样我就可以做到这一点？谢谢。

Answer 1

如果使用 Webpack，您可以使用 :export 轻松完成此操作，无需额外的依赖项。

webpack.config.js

module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
        loader: "style-loader" // creates style nodes from JS strings
      }, {
        loader: "css-loader" // translates CSS into CommonJS
      }, {
        loader: "sass-loader" // compiles Sass to CSS
      }]
    }]
  }
};

变量.scss

$white-color: #fcf5ed;
$dark-color: #402f2b;
$light-color: #e6d5c3;
$medium-color: #977978;
$alert-color: #cb492a;
$light-black-color: #706e72;
$black-color: #414042;

// the :export directive is the magic sauce for webpack
:export {
  whitecolor: $white-color;
  darkcolor: $dark-color;
  lightcolor: $light-color;
  mediumcolor: $medium-color;
  alertcolor: $alert-color;
  lightblackcolor: $light-black-color;
  blackcolor: $black-color;
}

file.js

import variables from 'variables.scss';

const CSS = {
  backgroundColor: variables.blackcolor
}

export default ({}) => {
  return <div style={CSS}>Content</div>
}