[英]Use sass variables into js files create-react-app
I have some color defined variables into _colors.scss
file.我在
_colors.scss
文件中有一些颜色定义的变量。
$color-succcess: #706caa;
$color-error: #dc3545;
I would like to also use them into some styled react components react-table
into my js file.我还想将它们用于一些样式化的反应组件
react-table
到我的 js 文件中。
I used the following article https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript as reference and many others like it but I cannot get it to work.我使用以下文章https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript作为参考,还有许多其他人喜欢它,但我无法让它工作。
I export the colors from my scss file:我从我的 scss 文件中导出颜色:
:export {
colorSuccess: $color-succcess;
colorError: $color-error;
}
and I import them into my js file:我将它们导入到我的 js 文件中:
import colors from "../../styles/_colors.scss";
but they are probably not loaded right.但他们可能没有正确加载。
How can I configure the create-react-app generated code to achieve the same thing as the guy in the article does with webpack.我如何配置 create-react-app 生成的代码以实现与文章中的人使用 webpack 所做的相同的事情。
I have faced a similar issue, and it took me a bunch of tries to get the desired result.我遇到了类似的问题,我花了很多时间才得到想要的结果。 If you already have
node-sass
installed, try the following.如果您已经安装了
node-sass
,请尝试以下操作。
First of all, try importing the main scss
file without the underscore, ie instead of ../../styles/_colors.scss
, try ../../styles/index.scss
or whatewer your main file is.首先,尝试导入不带下划线的主
scss
文件,即代替../../styles/_colors.scss
,尝试../../styles/index.scss
或您的主文件是什么。
Secondly, keep track of the variable names.其次,跟踪变量名称。 This code DID NOT work:
此代码不起作用:
:export {
$textBlack: $text-black;
}
while this one works perfectly虽然这个完美地工作
:export {
textBlack: $text-black;
}
For some reason it does not like the dollar sign in the variable name, though it is a valid JS variable name.出于某种原因,它不喜欢变量名中的美元符号,尽管它是一个有效的 JS 变量名。 Your case should work fine
你的情况应该可以正常工作
Try to reproduce these steps:尝试重现这些步骤:
npm i --save-dev node-sass
example.scss
. example.scss
。$hello: 'world';
:export {
my-var: $hello;
}
import React from 'react';
import Example from './example.scss';
export default () => Example.hello;
If you are using CRA version 4, there is a known issue where this feature will not work unless you define your scss file as <name>.modules.css.如果您使用的是 CRA 版本 4,则存在一个已知问题,即除非您将 scss 文件定义为 <name>.modules.css,否则此功能将无法使用。
See https://github.com/facebook/create-react-app/issues/10047#issuecomment-724227353 for details.有关详细信息,请参阅https://github.com/facebook/create-react-app/issues/10047#issuecomment-724227353 。
install the sass in the project if you didn't install that.如果您没有安装 sass,请在项目中安装它。
yarn add --dev node-sass
create a file and use this rule to name it => filename.module.scss ( for example variables.module.scss )创建一个文件并使用此规则为其命名 => filename.module.scss (例如 variables.module.scss )
$color-succcess: #706caa;
$color-error: #dc3545;
:export {
colorSuccess: $color-succcess;
colorError: $color-error;
otherColor: #786539;
}
and import it in the component like below:并将其导入到组件中,如下所示:
import colors from "../../styles/_colors.module.scss";
const TheComponent = () => {
console.log(colors.colorSuccess)
return <h1>The Component</h1>
}
export default TheComponent
// output in console : #706caa
In order to load SCSS files in CRA you need to add node-sass
as your dependency to package.json.为了在 CRA 中加载 SCSS 文件,您需要将
node-sass
添加为 package.json 的依赖项。 I've tested it out and after adding it to clean CRA project and importing colors
object (using :export
, like in the code you provided) works as expected.我已经对其进行了测试,并将其添加到 clean CRA 项目并导入
colors
对象(使用:export
,就像您提供的代码中一样)按预期工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.