Skip to content

Cra can't support postcss-nested syntax because webpack.config.js file haven't postcss-nested module #9604

Open
@melihyarikkaya

Description

@melihyarikkaya

Is your proposal related to a problem?

Cra can't support postcss-nested syntax because webpack.config.js file haven't postcss-nested module.

Sample nested css in my header.module.css file

.Header {
  background: white;
  h1 {
    color: red;
  }
}

Expected behavior when compiled

.Header {
  background: white;
}
.Header h1 {
    color: red;
}

Describe the solution you'd like

The problem solved when ejected cra and adding the 'postcss-nested' module to webpack.module.js.

Can you support postcss-nested by default?

// config/webpack.config.js
// row 89
ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-nested'), // <----  added this line 
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009'
              },
              stage: 3
            }),

Describe alternatives you've considered

postcss-nesting may be an alternative.

Additional context

(Write your answer here.)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions