extend dosen't work like sass

[shaoweilee]

please help me, dear sir. here is my question.
I use precss with webpack, here is my config file:
postcss.config.js:
module.exports = { plugins: [ require('precss'), require('autoprefixer'), ] };

webpack.config.js:
... { test: /\.css$/, exclude: /node_modules/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', options: { modules: true, localIdentName: '[local]-[hash:base64:5]', importLoaders: 1, } }, { loader: 'postcss-loader' } ], } ...
my styles file:
%a{ color: #ffffff; } .b{ @extend %a; } .c{ @extend %a; }
output is:
.b{ color: #ffffff; } .c{ color: #ffffff; }
I suppose it should like:.b, .c{color: #ffffff}
Did I make any mistakes? If not, How should I get that? I mean, extract the common parts with @extend, of cause, not writting like.b, .c{@extend %a;}

[diverent2]

Hi there,
no everything precss is trying to do works as it should (in your case).

Your "issue" is related to postcss-extend-rule issue #3.
Simply add cssnano to your pipeline to solve this issue. See Ticket liked above.

PS: autoprefixer already is included in a precss-plugin called postcss-preset-env.
So unless you want to specifically override certain options (maybe because your version number differs or sth.) you should be fine removing autoprefixer it from your plugin list 😉^^

[shaoweilee]

Hi there,
no everything precss is trying to do works as it should (in your case).

Your "issue" is related to postcss-extend-rule issue #3.
Simply add cssnano to your pipeline to solve this issue. See Ticket liked above.

PS: autoprefixer already is included in a precss-plugin called postcss-preset-env.
So unless you want to specifically override certain options (maybe because your version number differs or sth.) you should be fine removing autoprefixer it from your plugin list 😉^^

I'll try that, thank you!!!

[jonathantneal]

If you have a different plugin to replace extend, it would be considered, but this plugin does not work like Sass. It works like the CSS Extend Rule.