Where is the CSS produced from SCSS located?-CodePudding

I am using SCSS in my React.js app. I start the server using npm start and it is cool that I do not need to compile into CSS manually, but on the other hand I might want to view the actual generated CSS. Where is it located?

Here is my package.json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.15",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^5.1.1",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.3",
    "react-bootstrap-submenu": "^1.0.3",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.0",
    "sass": "^1.39.2",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": [
    ">0.3%",
    "not ie 11",
    "not dead",
    "not op_mini all"
  ]
}

CodePudding user response：

Webpack actually doing all that for you. if you want to see CSS files run npm run build that will create a build folder inside it you will find static/css

CodePudding user response：

What are you looking for is a plugin called mini-css-extract-plugin

mini-css-extract-plugin

With this component you can extract the css IN DEV MODE. You don't need to build your app everysingle time in order to see the css extracted.

1 - Install the plugin npm install mini-css-extract-plugin

2 - In the webpack.config config the plugin const MiniCssExtractPlugin = require('mini-css-extract-plugin');

3 - In the plugin you set the plugin: plugins: [new MiniCssExtractPlugin()],

4 - Then, set the rule: rules:[{ test: /\.(sc|c|sa)ss$/i, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], },],

Once you set this plugin the webpack WILL NOT insert the style automatically. You have to edit your index.html page and add the path of the css.

5 - Open the index.html page and insert inside the head the .css file.

<link rel="stylesheet" href="main.css">

Full example:

// ## webpack.config.js

// require the component
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public'),
    },

    // setting the plugin
    plugins: [new MiniCssExtractPlugin()],
    module: {

        // rule to get css and sass files
        // put the MiniCssExtractPlugin loader at first.
        // this will extract the css instead of inject on the page
        rules: [
            {
                test: /\.(sc|c|sa)ss$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
        ],
    },
};