多級嵌套在postcss不起作用

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

.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裝載機配置

{ 
    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-mixins')(), 
     require('postcss-each')(), 
     require('postcss-cssnext')({ 
     features: { 
      customProperties: { 
      variables: injectedCssVariables 
      } 
     } 
     }), 
     require('postcss-modules-values'), 
     require('postcss-reporter')({ 
     clearMessages: true 
     }) 
    ] 
    } 
}