Можно ли передать переменную 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
      }]
    }]
  }
};

variables.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 = {
  backgroudColor: variables.blackcolor
}

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

Answer 2

Вы можете использовать эту библиотеку для передачи переменных Sass в JS.https://www.npmjs.com/package/sass-to-js

вот пример,

SASS:

$colorMap: (
  colorHexShort: #f00,
  colorHex: #ff0000,
  colorRgba: rgba(255, 0, 0, 0.5),
  blackGradations: ('#000', '#111', '#222') 
);
.colors-data{
  &:before{
    content: sassToJs($colorMap);
    display: none;
  }
}

JS:

var colorsDataEl = $('.colors-data');
var colorsData = colorsDataEl.sassToJs({pseudoEl:":before", cssProperty: "content"});
colorsDataEl.html(JSON.stringify(colorsData));