Question

我正在尝试将在Sass中使用的变量传递到Laravel / Blade / JS，以便可以在一个位置使用一个变量来维护用于维护站点的各种语言中的内容。

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

Answer 1

您可以使用此库将Sass变量传递给JS。 https://www.npmjs.com/package/sass-to-js

这是一个例子，

SASS：

return rt, ht, counter

JS：

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

Answer 2

如果使用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>
}

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

2 个答案: