Discussion on: React + Custom Bootstrap 4 Sass [PROBABLY DEPRECATED]

[Alan Chao]

Hi, I follow the step and success to custom my bootsrap.
However in my component folder such as Header.js that it can't listen to Header.sass but Header.css work!!

So I npm run eject and add sass loader like this

      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader!sass-loader",
        })
      },

And then I got error :

node-sass-chokidar --include-path ./src/assets --include-path ./node_modules src/assets/ -o src/assets/

{
"status": 1,
"file": "/Users/alan2305/F2E/week2/filter-app/src/assets/index.scss",
"line": 2,
"column": 1,
"message": "File to import not found or unreadable: bootstrap/scss/_functions.scss.",
"formatted": "Error: File to import not found or unreadable: bootstrap/scss/_functions.scss.\n on
line 2 of src/assets/index.scss\n>> @import \"bootstrap/scss/_functions.scss\";\n\n ^\n"
}

It look like npm run eject cause my script crash in package.json !?

how can I resolve this problem thx!!

[Dídac]

This tutorial is actually made for not ejecting if you run eject you cannot update create-react-app on that project to fix it I think you can follow this tutorial.

The scripts are looking for .scss files in /src/styles since you change the folder name to assets now is checking in /src/assets and what the script does is that if you don't add _ at the biginning of the name will treat it as a new file so from a Header.scss it will create a Header.css (the .css is the one file that you can use inside your component, because is a build css file).

IMO you should create a index.scss and then import every component style file (like _header.scss) after importing _custom boostrap and boostrap and then import in the App.js the index.css that the script will generate on every change of any .scss file in the /src/assets folder, but this is just a way to do it I understand that can be more clear to have it in every component folder.

If needed I can take a look if you have a public repo.

Hope it helps.