css - 尝试将 SASS 添加到 React 应用程序

Question

我使用 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 来完成它，我认为这是不正常的。

我的问题是:

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

Answer 1

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

为了将 scss 转换为 css，你需要编写一个 loader，在 Webpack 中将是这样的:

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

这是加载程序的包，使用 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 包。