如何在不在 css 中编译的情况下观察 sass 文件夹的变化

Question

当前我在 package.json 中的脚本如下所示：

"scripts": {
    "build-css": "node-sass-chokidar src/styles/ -o src/styles/",
    "watch-css": "npm run build-css && node-sass-chokidar src/styles/ -o src/styles/ --watch --recursive"
  }

当我输入 npm 运行 watch-css 它会监视并将我所有的 scss 文件编译成 css .我在我的反应组件中导入编译的 css 文件，就像这样 import '../styles/component.css'

我需要找到一种方法来导入 scss 文件而不是 css 文件，并使用像 npm 运行 watch-s[=29 这样的特殊命令=] 查看我在 scss 文件中所做的所有更改。

PS：我正在使用 create-react-app

Answer 1

使用

@import "some_style.scss";

在您的 sass 文件中。

Answer 2

CRA 为简单起见抽象出构建配置逻辑。如果要添加自定义构建逻辑，则需要使用此命令选择退出抽象版本：npm run eject

这将运行一个公开 webpack 构建配置的脚本。从那里，您需要为 webpack 添加一个 sass 加载程序。

指南：https://medium.com/@Connorelsea/using-sass-with-create-react-app-7125d6913760

如何在不在 css 中编译的情况下观察 sass 文件夹的变化

How to watch sass folder for changes without compiling in css in react

reactjs

create-react-app