如何在不编译 CSS 的情况下查看 sass 文件夹的更改答案

【问题标题】：How to watch sass folder for changes without compiling in css in react如何在不编译 CSS 的情况下查看 sass 文件夹的更改
【发布时间】：2018-03-24 23:52:11
【问题描述】：

我在 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 run watch-css 时，它会监视我所有的 scss 文件并将其编译成 css。我在我的反应组件中导入编译的 css 文件，如下所示 import '../styles/component.css'

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

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

【问题讨论】：

标签： reactjs create-react-app

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

使用

@import "some_style.scss";

在你的 sass 文件中。

【讨论】：