0

Currently my react project using parcel is not loading .scss files.

I have tried different suggested solutions, like installing sass, node-sass or even dart-sass but none of those have worked for me.

.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"
        ]
      }
    }

It should work correctly, but it, is not working correctly.
My issue, including my Github repository and expected result, can be found here

frarr
  • 1
  • 4
  • Parcel hasn't been configured to import scss variables to javascript, which is why some elements have styles and others don't. It also doesn't support importing scss `modules` either. That said, it does, however, support global scss imports: `import './example.scss';` and they work as expected. See related [open issue about supporting scss exports](https://github.com/parcel-bundler/parcel/issues/2517). Also, your linked working example uses webpack. Why the need to move to parcel over a working webpack config? – Matt Carlotta Apr 11 '20 at 05:46
  • I was trying to use Parcel, since Webpack configuration seems a lot of work. I am trying to develop a a multi-page React app and it seemed easier with Parcel. But as it seems, that Webpack is unavoidable. So I will learn how to configure it. – frarr Apr 11 '20 at 20:58
  • If you don't want to have a custom webpack config, then you can use the [create-react-app](https://github.com/facebook/create-react-app). It comes preconfigured with a webpack config that suits most user's needs. That said, if you're not into pre-configured templates (like me), then here's a good place to start: [webpack concepts](https://webpack.js.org/concepts/) – Matt Carlotta Apr 11 '20 at 21:21

1 Answers1

0

yes, that's can happen all of a sudden. I found one possible reason that Parcel does not track scss/css updates just because of empty braces in the file.

.someStyle {}         //avoid empty braces in your style file
Amit Kumawat
  • 114
  • 1
  • 1
  • 12