也许这听起来很假，但我想在我的 React 应用程序中使用 SCSS 来设置样式。
我知道 React 会“读取”我所有的样式并在单独的 <style> 中生成它们<head> 中的标签部分。
我已经eject这个应用程序并配置 webpack.config 文件以使用 scss。
有没有办法(或最佳实践)将它们用作外部 css 文件？
这就是我想要的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="mystyles.css" />
.
.
.
代替这个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<style> <!-- my styles --> </style>
<style> <!-- my styles --> </style>
所以我想要一个mystyles.scss包含我所有其他 scss 的文件像这样的文件:
mystyles.scss
@import variables.scss;
@import components.scss;
React 会生成一个外部 css文件，当我修改任何样式时，create-react-app cli 将实时重新加载它。
编辑
我想像这样使用 React，因为在我看来，使用 chrome 检查工具调试样式更容易。它可以告诉我哪个 scss 文件具有这种样式。
但如果您有更好的解决方案来调试 React 中的 scss，我愿意接受!
最佳答案
最新的 CreateReactApp 已经支持导入 sass，
install node-sass
import "./mystyle.scss"; // add to app.js top.
如果不使用 CRA，你需要从 webpack 处理
npm install sass-loader node-sass webpack --save-dev
npm install style-loader css-loader --save-dev
并将其添加到您的 webpack 配置文件中。
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
}]
}
};
关于css - 有没有办法将我的样式用作 react 中的外部 css 文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54574491/