After configuring sideEffects, my SCSS style is lost.

[Angry-Sparrow]

When I set sideEffects: false in package.json, the style is lost . In my project, I use scss to implement my style.

My package.json file configuration is as follows:

{
  "name": "my-components",
  "version": "1.0.0",
  "description": "my components",
  "main": "lib/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "build-webpack": "webpack --config webpack.prod.js",
    "tsb": "tsc --p tsconfig.json",
    "start": "webpack-dev-server webpack --config webpack.dev.js --open",
    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
    "lint": "tslint -p tsconfig.json",
    "build": "npm run-script build:gulp && npm run-script dist && npm run-script build:types",
    "build:gulp": "gulp build",
    "build:types": "npx tsc --emitDeclarationOnly --outDir lib && npx tsc --emitDeclarationOnly --outDir es",
    "dist": "npm run-script build-webpack"
  },
  "files": [
    "src/**/*",
    "dist",
    "lib",
    "es"
  ],
  "keywords": [
    "Realsee",
    "design",
    "react",
    "ui",
    "components"
  ],
  "author": "lr",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.14.0",
    "@babel/plugin-proposal-export-default-from": "^7.12.13",
    "@babel/plugin-transform-runtime": "^7.14.2",
    "@babel/preset-react": "^7.13.13",
    "@babel/preset-typescript": "^7.13.0",
    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-controls": "^6.2.9",
    "@storybook/addon-docs": "^6.2.9",
    "@storybook/addon-essentials": "^6.2.9",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/builder-webpack5": "^6.3.0-alpha.19",
    "@storybook/client-api": "^6.2.9",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.2.9",
    "@types/react": "^17.0.5",
    "@types/react-dom": "^17.0.5",
    "autoprefixer": "^9.0.0",
    "babel": "^6.23.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "classnames": "^2.3.1",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^5.2.4",
    "dotenv-webpack": "^7.0.2",
    "file-loader": "^6.2.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-less": "^4.0.1",
    "gulp-postcss": "^9.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-rtlcss": "^1.4.2",
    "gulp-sourcemaps": "^3.0.0",
    "html-webpack-plugin": "^5.3.1",
    "less": "^3.5.0",
    "less-loader": "^8.1.1",
    "mini-css-extract-plugin": "^1.6.0",
    "postcss": "^8.2.14",
    "postcss-import": "^14.0.1",
    "postcss-loader": "^5.2.0",
    "prettier": "^2.2.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "sass": "^1.32.12",
    "sass-loader": "^10.1.1",
    "style-loader": "^2.0.0",
    "transform-runtime": "0.0.0",
    "ts-loader": "^9.1.2",
    "tslint": "^6.1.3",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "^4.2.4",
    "url-loader": "^4.1.1",
    "webpack": "^5.36.2",
    "webpack-cli": "^4.6.0",
    "webpack-dev-middleware": "^4.1.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-virtual-modules": "^0.4.2"
  },
  "dependencies": {
    "del": "^6.0.0"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

[Angry-Sparrow]

I configured it like this in webpack.config.js

{
test: /\.css$/i,
use: [
        {
        loader: MiniCssExtractPlugin.loader,
        options: {
            publicPath: (resourcePath, context) => {
                `&{path.relative(path.dirname(resourcePath), context)}/`
            },
            modules: {auto: true}
        }
        },
        resolve('css-loader'),
        resolve('postcss-loader')
    ]
},
{
    test: /\.s[ac]ss$/i,
    use: ['style-loader', 'css-loader', 'sass-loader']
},

[gkemp94]

@leesgithub2019 ,

First of all thanks for creating this ticket, this helped my team debug a similar issue because you were able to isolate the issue to the sideEffects flag. Basically what is happening is webpack is tree shaking the styles from your bundle because you've declared in your package.json that there are no side effects. To fix you just need to changed "false" to "[".scss", ".css"]".

Hopefully that helps.

[Angry-Sparrow]

@leesgithub2019 ,

First of all thanks for creating this ticket, this helped my team debug a similar issue because you were able to isolate the issue to the sideEffects flag. Basically what is happening is webpack is tree shaking the styles from your bundle because you've declared in your package.json that there are no side effects. To fix you just need to changed "false" to "[".scss", ".css"]".

Hopefully that helps.

It helps, thanks. I'll learn more about why.