NodeJS 如何使SCSS变量起作用

2jcobegt 于 2023-02-12 发布在 Node.js

关注(0)|答案(2)|浏览(183)

我跟随这篇文章How to use SCSS variables into my React components或这篇文章React and SCSS export a variable from scss to react在我的react应用程序中获取scss变量，但它不起作用。

myvar.scss文件：

$color: red;

:export {
    color: $color;
}

.myclass {
  background-color: $color;
}

应用程序.js文件：

import variables from './myvar.scss';

const App = () => {
    console.log(variables);
    return <div className="myclass">Hello</div>
}

export default App;

div的背景是红色的，所以myvar.scss可以工作，但是variables是一个空对象。
（React版本：第17.0.1节）
node_modules\react-scripts\config\webpack.config.js

module: {
  strictExportPresence: true,
  rules: [
    { parser: { requireEnsure: false } },
    {
      oneOf: [
...
        {
          test: sassRegex,
          exclude: sassModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 3,
              sourceMap: isEnvProduction
                ? shouldUseSourceMap
                : isEnvDevelopment,
            },
            'sass-loader'
          ),
          sideEffects: true,
        },

node.js

来源：https://stackoverflow.com/questions/66119188/how-to-get-scss-variables-into-react

2条答案

按热度按时间

r55awzrz1#

更新：原来的答案声称它只被webpack支持，但现在已经不是这样了，很多捆绑包现在通过自己的css处理管道支持这一点。
原始答复：这是一个webpack/css加载器特性，仅适用于webpack和css加载器（https：//webpack.js.org/loaders/css-loader/#separating-interoperable-css-only-and-css-module-features）

重要提示：SCSS/CSS文件中的:export语法只适用于那些被css-loader视为模块的文件，因为此语法是css模块建议的一部分。

使用css-loader的默认行为并通过filename触发该行为：例如foostyle.module.scss
或者你可以配置css-loader来把所有文件当作模块，例如loader: 'css-loader', options: { modules: true }

一个带有示例的博客可以在这里找到：https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript（请注意，博客文章没有提到必须使用css模块这一事实。）

$white-color: #fcf5ed;

:export {
  whitecolor: $white-color;
}

以及

import variables from 'variables.module.scss';

console.log(variables.whitecolor)

您的webpack.config.js可能会包含一个加载器链，其中css-loader是最后一个或倒数第二个（按进程时间顺序来说），这应该可以工作。

module: {
    rules: [
      {
        test: /\.scss$/,
        use: [ 'style-loader', 'css-loader', 'sass-loader' ],
      },

赞(0）回复(0）举报 2023-02-12

ecbunoof2#

我会说试试这样用

const App = () => {
  const [parameters, setParameters] = useState({
    fontFamily: ''
  });
  return (
    <div style={setParameters(fontFamily && { fontType: 'font_name' })}>
      {content}
    </div>
  );
};

希望这对你有用。

赞(0）回复(0）举报 2023-02-12

我来回答

NodeJS 如何使SCSS变量起作用

2条答案

相关问题

热门标签

最新问答