尝试将 SASS 添加到 React 应用程序答案

【问题标题】：Trying to add SASS to a React application尝试将 SASS 添加到 React 应用程序
【发布时间】：2017-08-05 09:02:12
【问题描述】：

我使用 create-react-app 创建了一个全新的 React 应用程序，现在我想向它添加 SASS。

我按照here 的说明进行操作。基本上我跑

npm install node-sass --save-dev

然后将这两行添加到我的package.json 文件中：

"scripts": {
    "build-css": "node-sass src/ -o src/", # Line 1
    "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive", # Line 2
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",

根据文档，这应该可以完成这项工作，但是当我完成该过程时

mv src/App.css src/App.scss

然后

npm run watch-css

脚本不会自行完成。我总是必须使用Ctrl-C 来完成它，我相信这不正常。

我的问题是：

这正常吗？
我错过了什么吗？
如果是这样，我错过了什么？

【问题讨论】：

你运行 watch-css，脚本不会自己完成，因为他在监视 sass 文件的变化。每次更改都会运行预处理器。
哦，我明白了！谢谢！它是一个完全意义上的观察者。持续关注我的 scss 文件的变化。
根据文档，我（错误地）认为它会将 SASS“编译”为 CSS。

标签： css reactjs sass

【解决方案1】：

您需要将scss 转换为css，为此您可以使用Webpack 或Gulp。我将向您展示Webpack 的示例，因为我更喜欢这个。 Webpack 需要一些时间来配置你可以观看大量的互联网教程。

为了transpile scss into css你需要写一个loader，在Webpack会是这样的：

 module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
            'style', 'css!sass'
        )
      },
    ]
  },

这是加载程序的包，install with npm --S -D sass-loader style-loader 到 package.json 文件中。

现在为了让Webpack 看到scss 文件，您需要将这些文件导入js/jsx 文件，例如App.jsx。但是如果没有很多导入，你可以有一个 base.scss 并且你将导入其他 scss 文件到其中

示例import './assets/stylesheets/scss/base.scss';

base.scss 包含 import 到其他 scss 文件。

这只是对您必须做的事情的简短介绍。您需要更多配置 Webpack 您可以搜索 youtube 或 This github 链接将帮助您很多！

Gulp 类似于你写的tasks，据我所知有gulp-scss 包。

【讨论】：