SCSS does not work

[amitava82]

Importing .scss file throws error

ReferenceError: document is not defined
    at insertStyleElement (webpack:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:107:15)
    at addStyle (webpack:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:219:13)
    at addStylesToDom (webpack:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:94:20)
    at module.exports (webpack:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:251:3)
    at eval (webpack:///./src/Views/ReduxPage/style.scss?:12:188)
    at Object../src/Views/ReduxPage/style.scss (/Users/amitava/lab/react-fondue/build/dev-server-bundle.js:1139:1)
    at __webpack_require__ (/Users/amitava/lab/react-fondue/build/dev-server-bundle.js:27:30)
    at Object.eval (webpack:///./src/Views/ReduxPage/ReduxPage.tsx?:72:1)
    at eval (webpack:///./src/Views/ReduxPage/ReduxPage.tsx?:158:30)
    at Object../src/Views/ReduxPage/ReduxPage.tsx (/Users/amitava/lab/react-fondue/build/dev-server-bundle.js:1105:1)
    at __webpack_require__ (/Users/amitava/lab/react-fondue/build/dev-server-bundle.js:27:30)
    at Module.eval (webpack:///./src/App/Routes.js?:27:85)
    at eval (webpack:///./src/App/Routes.js?:144:30)
    at Module../src/App/Routes.js (/Users/amitava/lab/react-fondue/build/dev-server-bundle.js:325:1)
    at __webpack_require__ (/Users/amitava/lab/react-fondue/build/dev-server-bundle.js:27:30)
    at Module.eval (webpack:///./src/server/render.js?:13:69)

[luangjokaj]

@amitava82 can you share your repository? So I can give it a try, I'm curious to see, as I never tried SCSS in the current setup (PostCSS it's much better for me).

[amitava82]

I'm just trying out your boilerplate. You can simply add a .scss file and import to a view.

[luangjokaj]

Pushed a quick fix: 3713ec7a80252700bad10f25fc052281cca6ae85

I tested and it is working now. Give it a try, let me know 😃

[amitava82]

OK, now build works but scss import does not work right. Try this:

1. Install bootstrap npm i bootstrap
2. import bootstrap scss into a scss file @import "~bootstrap/scss/bootstrap";
3. add a bootstrap classname to an element eg <h1 className="text-success">Hi</h> If you inspect the element then you'll see the style is missing. Bootstrap style is not imported

Looks like it is suffixing stuff to the bootstrap classes, eg - a.about_s__text-success--3riMP:hover, a.about_s__text-success--3riMP.