包裹未加载 .scss 文件答案

【问题标题】：Parcel not loading .scss files包裹未加载 .scss 文件
【发布时间】：2020-07-23 21:42:11
【问题描述】：

目前我使用parcel 的react 项目未加载.scss 文件。

我尝试了不同的建议解决方案，例如安装 sass、node-sass 甚至 dart-sass，但没有一个对我有用。

.babelrc

{
  "plugins": ["@babel/plugin-proposal-class-properties"],
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

package.json

    {
      "name": "podder",
      "version": "1.0.0",
      "main": "index.js",
      "license": "MIT",
      "dependencies": {
        "classnames": "^2.2.6",
        "minimist": "^1.2.5",
        "parcel": "^1.12.4",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-scripts": "3.4.0",
        "react-swipeable-views": "^0.13.9",
        "svjsl": "^1.8.4"
      },
      "scripts": {
        "start": "parcel public/index.html",
        "build": "parcel build public/index.html"
      },
      "devDependencies": {
        "@babel/plugin-proposal-class-properties": "^7.8.3",
        "babel-core": "7.0.0-bridge.0",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1",
        "parcel-bundler": "^1.12.4",
        "sass": "^1.26.3"
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
    }

它应该可以正常工作，但不能正常工作。
My issue, including my Github repository and expected result, can be found here

【问题讨论】：

Parcel 尚未配置为将 scss 变量导入 javascript，这就是为什么有些元素有样式而其他元素没有的原因。它也不支持导入 scss modules 。也就是说，它确实支持全局 scss 导入：import './example.scss'; 并且它们按预期工作。请参阅相关的open issue about supporting scss exports。此外，您链接的工作示例使用 webpack。为什么需要转移到一个有效的 webpack 配置上？
我尝试使用 Parcel，因为 Webpack 配置似乎需要做很多工作。我正在尝试开发一个多页 React 应用程序，使用 Parcel 似乎更容易。但看起来，Webpack 是不可避免的。所以我将学习如何配置它。
如果你不想自定义 webpack 配置，那么你可以使用create-react-app。它预配置了适合大多数用户需求的 webpack 配置。也就是说，如果你不喜欢预配置的模板（比如我），那么这里是一个很好的起点：webpack concepts

标签： reactjs sass parcel parceljs

【解决方案1】：

是的，这可能会突然发生。我发现 Parcel 不跟踪 scss/css 更新的一个可能原因是因为文件中有空括号。

.someStyle {}         //avoid empty braces in your style file

【讨论】：