Repository navigation
Bootstrap's sass is not working with new r2.0.0-next.66cc7a90 (with opt-in sass) #4363
Description
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
node -v: 8.9.1yarn --version(if you use Yarn): 1.6.0npm ls react-scripts(if you haven’t ejected): r2.0.0-next.66cc7a90- Operating system:
debian sid amd64
Steps to Reproduce
npx create-react-app myapp --scripts-version react-scripts@2.0.0-next.66cc7a90- rename
index.csstoindex.scss - update
index.jsto point toindex.scss yarn add bootstrap- open
index.scssand add at the bottom@import "~bootstrap/scss/bootstrap.scss"; 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!
Reacted by Mikhail Osher and Ajinkya Borade
Activity
miraage commentedon Apr 26, 2018
Same here.
node 8.9.1
npm 6.0.0
react-scripts 2.0.0-next.66cc7a90
osx 10.13.4
easadler commentedon Apr 26, 2018
I'm getting the same error. Deleting
@import progressfromnode_modules/bootstrap/scss/bootstrap.scssfixed the problem. The file being imported is javascript, but I think is being read asCSS.Thanks for supporting sass and looking forward to a solution!
phahn commentedon Apr 26, 2018
I think this is related to webpack/sass-loader#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 commentedon Apr 27, 2018
AFAIK sass-loader@7.0.1 solves this problem.
iansu commentedon Apr 27, 2018
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 commentedon Apr 27, 2018
Just tested cra@2-beta + eject + sass-loader@7.0.1
Problem gone
gaearon commentedon Apr 27, 2018
Before we close this, worth keeping an eye on webpack/sass-loader#556 (comment).
Update sass-loader to 7.0.1 (#4376)
iansu commentedon Apr 28, 2018
I merged the PR updating
sass-loaderto7.0.1but I'll leave this issue open for the time being.hermanho commentedon Jun 8, 2018
Could the fixed alpha version be deployed to npm?
seif1000 commentedon Aug 7, 2018
add ``import 'bootstrap/dist/js/bootstrap.bundle.min'; to your route index.js
Timer commentedon Sep 27, 2018
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.
Update sass-loader to 7.0.1 (react#4376)