postcss / postcss-nested

PostCSS plugin to unwrap nested rules like how Sass does it.
MIT License
1.16k stars 67 forks source link

nested class don't work #63

Closed oliver1204 closed 7 years ago

oliver1204 commented 7 years ago

my config.js is :

module: {
...
    rules: [
     ...
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options:  [
            require('postcss-nested')(),
            require('postcss-import')({
                path: [
                   './src'
                ]
            }),
           require('postcss-flex-fallback')(),
           require('postcss-px2rem')({
               remUnit: 75,
           }),
           require('autoprefixer')({ browsers: ['last 2 versions'] }),
       ],
   },
   ......
   ]
...
}

in a.postcss file

.main {
  background: #f1f2f4;
  padding: 10px;
  height: 90vh;
  width: 375px;
  margin: 0 5px;
  overflow-y: scroll;
  overflow-x: hidden;
  box-shadow: inset 0px 0px 5px 1px #ccc;

  & .nothingTip {
    height: 88vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 6rem;
    color: #EAE9E9;
  }
}

after compiling...

image i have done as https://github.com/gajus/babel-plugin-react-css-modules/issues/49

ai commented 7 years ago

This input CSS works in postcss-cli, so it could not be problem of plugin.

I know that it is sad when maintainer closer issue like this, but I didn't use Vue and didn't know how to look, why Vue doesn't run nested plugin.

I recommend you to all question in Stack Overflow or Vue chat.