如何使用 npm 在 react 上运行 sass答案

【问题标题】：How do I run sass on react using npm如何使用 npm 在 react 上运行 sass
【发布时间】：2019-12-14 05:34:18
【问题描述】：

使用 NPM 在我的 ReachJs 文件上安装 SASS 后，我不断收到此错误代码。我已经阅读了几篇关于使用 NPM 安装 SASS 的文档，但似乎无法理解如何使其工作。这是错误代码在我的 cmd 上的样子...

./src/homepage.styles.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-4!./src/homepage.styles.scss)
    margin: 0 7.5px 15px;

                 ^
  Invalid CSS after "...: 0 7.5px 15px;": expected "}", was "&: first-child {"
  in C:\Users\user\Desktop\corpers\src\homepage.styles.scss (line 22, column 23)

[

同时，这是 SASS 代码

.menu-item {
min-width: 30%;
height: 240px;
flex: 1 1 auto;
display-items: center;
justify-content: center;
border: 1px solid black;
margin: 0 7.5px 15px;       

    &: first-child {
        margin-right: 7.5px;
    }

    &: last-child {
        margin-left: 7.5px;
    }

    .content {
        height: 90px;
        padding: 0.25px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        border: 1px solid black;

        .title {
            font-weight: bold;
            margin-bottom: 6px;
            font-size: 22px;
            color: #4a4a4a;
        }

        .subtitle {
            font-weighr: lighter;
            font-size: 16px;
        }

}[\]\[1\][1]

【问题讨论】：

查看错误消息的第一行，./node_modules/css-loader/dist/cjs.js? 您的scss 文件似乎仍由css-loader 处理。你在使用 webpack 吗？你是如何配置你安装的 sass-loader 的？

标签： node.js reactjs npm sass

【解决方案1】：

所以我想了一个办法。我需要在我的 create-react-app 中删除我的 npm.lock 和 node_modules，然后在我的 cmd 中安装 yarn。一旦完成，一切都开始正常工作。逻辑是 npm 和 yarn 不兼容，所以一旦我使用 npm 创建-react-app，它自然会下载 react 库。但是，有些依赖项与 yarn 不兼容，需要删除这些依赖项才能完全安装 yarn。

【讨论】：