Can not resolve @extend with @import

[zongwei007]

I use precss 3.1.2 and found something strange like this:

//foo.scss
%foo {
  font-size: 12px;
}

//bar.scss
@import './foo';

.title {
  @extend %foo;
  float: left;
}

I expect result is:

.title {
  font-size: 12px;
  float: left;
}

But finally it is:

%foo {
  font-size: 12px;
}

.title {
  float: left;
}

I try to modified the index.bundle.js of precss, change variable plugins from

const plugins = [
	postcssExtendRule,
	postcssAdvancedVariables,
        ...
];

to

const plugins = [
	postcssAdvancedVariables,
	postcssExtendRule,
        ...
];

It seem to work well now.

[xmasong]

I met the same problem.

[xmasong]

Is there a temporary solution？@zongwei007

[xmasong]

I found precss@2.0.0 can solve this problem

[LVBoA]

The front end da na has done a good job!

[zongwei007]

@Song-Xiangming Yes, it just a temporary solution and need more testing. I use it in my private npm repository now.

[educarneiro]

This issue still persists. @extend is not being processed for imported files.