Question

当我使用postcss-loader和postcss-cssnext插件时，css类可以在第二个嵌套的前面生效，在第三个嵌套中不会起作用

style.css

    .root {
        background-color: #ccc;

        & .header {
            height: 60px;
            background-color: #dcdcdc;
        }

        & .content {
            border: 1px solid red;

            & .test { /* doesn't work */
                background-color: #00f;
                height: 200px;
            }
        }
    }

app.tsx

    <div className={style.root}>
        <div className={style.header}>
          Hello test
        </div>
        <div className={style.content}>
            <div className={style.test}>

            </div>
        </div>
    </div>

postcss-loader config

    {
      loader: 'postcss-loader',
      options: {
        sourceMap: true,
        sourceComments: true,
        plugins: [
          require('postcss-import')({
            root: path.join(__dirname, './'),
            path: [ path.join(__dirname, './src/toolkit') ]
          }),
          require('postcss-at-rules-variables')({
            variables: makeAtRulesVariables(injectedCssVariables)
          }),
          require('postcss-modules-values'),
          require('postcss-mixins')(),
          require('postcss-each')(),
          require('postcss-cssnext')({
            features: {
              customProperties: {
                variables: injectedCssVariables
              }
            }
          }),
          require('postcss-reporter')({
            clearMessages: true
          })
        ]
      }
    }

Answer 1

您能否在样式表和配置文件中进行这些更改。

的style.css

base.OnEnable()

postcss-loader config

.root {
    background-color: #ccc;

    .header {
        height: 60px;
        background-color: #dcdcdc;
    }

    .content {
        border: 1px solid red;

        .test { /* doesn't work */
            background-color: #00f;
            height: 200px;
        }
    }
}

postcss中的多级嵌套不起作用

1 个答案: