Create-react-app: Bootstrap's sass is not working with new r2.0.0-next.66cc7a90 (with opt-in sass)

[Woile]

Is this a bug report?

Doubt it, but it might be interesting to know, due to the fact that bootstrap is recommended in the README, and bootstrap itself recommends using sass for its full potential

Relates to #3815

Environment

1. node -v: 8.9.1
2. yarn --version (if you use Yarn): 1.6.0
3. npm ls react-scripts (if you haven’t ejected): r2.0.0-next.66cc7a90
4. Operating system: debian sid amd64

Steps to Reproduce

1. npx create-react-app myapp --scripts-version [email protected]
2. rename index.css to index.scss
3. update index.js to point to index.scss
4. yarn add bootstrap
5. open index.scss and add at the bottom @import "~bootstrap/scss/bootstrap.scss";
6. yarn && yarn start

Expected Behavior

No error is shown.

Actual Behavior

This error appears:

./src/index.scss
Module build failed: 
module.exports = require('./lib/node-progress');
^
      Invalid CSS after "m": expected 1 selector or at-rule, was "module.exports = re"
      in bla/bla/bla/node_modules/progress/index.js (line 1, column 1)

More info

According to bootstrap:

For Bootstrap to compile, make sure you install and use the required loaders: sass-loader, postcss-loader with Autoprefixer

I think those loaders are missing, does anyone know if there's an easy way to add them without ejecting?

I hope to be helpful,

Thanks to everyone!

[miraage]

Same here.
node 8.9.1
npm 6.0.0
react-scripts 2.0.0-next.66cc7a90
osx 10.13.4

[easadler]

I'm getting the same error. Deleting @import progress from node_modules/bootstrap/scss/bootstrap.scss fixed the problem. The file being imported is javascript, but I think is being read as CSS.

Thanks for supporting sass and looking forward to a solution!

[phahn]

I think this is related to https://github.com/webpack-contrib/sass-loader/issues/556

For me it happenend when I had a npm package with the same name as a sass file I was trying to import from node_modules.

[miraage]

AFAIK [email protected] solves this problem.

[iansu]

Does someone want to submit a PR to update sass-loader? It would be nice to add a test for this case as well.

[miraage]

Just tested cra@2-beta + eject + [email protected]
Problem gone

[gaearon]

Before we close this, worth keeping an eye on https://github.com/webpack-contrib/sass-loader/issues/556#issuecomment-384264549.

[iansu]

I merged the PR updating sass-loader to 7.0.1 but I'll leave this issue open for the time being.

[hermanho]

Could the fixed alpha version be deployed to npm?

[seif1000]

add ``import 'bootstrap/dist/js/bootstrap.bundle.min'; to your route index.js

[Timer]

This is working in v2 beta. We don't use the options linked in above issue -- not sure this is worth keeping open unless someone can formulate a better proposal on what we need to keep an eye out for or do.