无法在新的 React 应用程序中导入 sass 文件

Question

我正在尝试将 sass 与 react 一起使用，但我的 sass 文件都没有加载。我没有使用 create-react-app 来启动这个项目，而是使用 web pack 和 npm init 从头开始

。当我尝试使用变量时，例如$titleColor，我收到一个错误，

"未捕获的引用错误：未定义$titleColor"。

没有导入错误，并且已成功加载所有导入的路径。也没有编译错误 - 如果我不尝试访问$titleColor，我的应用程序工作正常。

这是我的代码：

// index.html:
<link rel="stylesheet" href="/src/assets/styles/app.scss">
<link rel="stylesheet" href="/src/assets/styles/colors.scss">
// app.scss
@font-face {
font-family: "San Francisco";
font-weight: 400;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}
@import "./colors.scss"
// colors.scss
$titleColor: 'rgba(211,64,80,1.0)';
// menuSection.js, a React Component
import '../../assets/styles/colors.scss'
// web pack config
module: {
rules: [
{
test: /.scss$/,
use: ["sass-loader"]
}
]
}

Answer 1

请尝试这种方式， 1. 安装 'npm install node-sass --save'。 2.将应用程序.css文件重命名为应用程序.scss 3.创建一个名为变量.scss的新文件，并将标题颜色设置为类似 $titleColor：#aeaeae; 4. 在 app.scss 中导入此颜色，@import"变量.scss"。 5.然后使用您的$titleColor，例如"背景颜色：$titleColor"。

Answer 2

您不能将 SASS/SCSS 文件"附加"到 HTML 文档。

尝试编译成CSS并将该css文件附加到HTML文档

如何在 HTML 中包含 SCSS 文件

$titleColor错误是由于全局变量文件未包含在项目中或全局变量$titleColor未定义，请在项目中搜索$titleColor并确保它包含在.scss文件中

检查 SCSS 变体的使用情况

Answer 3

你安装了 only-sass 加载器。 这只是告诉 Webpack 识别 .scss 文件。 你必须一步一步地告诉 Webpack evrything。我假设你也已经安装了node-sass，因为sass-loader需要它。

你需要安装 CSS 加载器和样式加载器.css加载器获取你的 CSS 并将其转换为捆绑包中的 JavaScript 代码.js。 样式加载器将获取该 JavaScript 代码并将其注入到 DOM 中。 安装后，将它们添加到 webpack.config.js如下所示：

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

规则是 webpack 的待办事项列表。 每个规则都在一个对象中定义。 测试会告诉 Webpack 每当它看到这种类型的文件时，按照加载器所说的去做。 如果您只有一个加载器，请像loader:""一样定义。 如果你有一个加载器数组，你使用use:[]. 您必须知道，在 .scss 规则中此数组有顺序。

css-loader 是翻译器，style-loader 是 injector。 似乎首先您必须首先翻译并添加css-loader。 但实际上它们以相反的顺序加载。

在你的索引中.html你不需要链接任何CSS文件。 style-loader 将处理它。