webpack loader sass+postcss 报错 Module build failed Unknown word

代码:

1
2
3
4
5
6
7
8
9
10
11
12
@function zeroize($i) {
@if ($i < 10) {
$i : '0' + $i
}
@return $i
}
@for $i from 1 through 9 {
&.nav#{ zeroize($i) } i {
background: url('./sprite/float-nav#{ zeroize($i) }.png')
}
}

报错:

1
2
3
4
5
6
7
8
Module build failed: Unknown word (73:15)
71 | }
72 | @for $i from 1 through 9 {
> 73 | &.nav#{ zeroize($i) } i {
| ^
74 | background: url('./sprite/float-nav#{ zeroize($i) }.png')
75 | }

当同时用了sass+postcss时,需要注意loader的顺序,需先用sass再用postcss

否则当postcss-spritessass方法都对背景图片做处理时,sass语法就会报错。

所以得先让sass处理完生成css代码后,再通过postcss-sprites对代码中的图片做雪碧图处理。

1
2
3
4
5
{
test: /\.scss$/i,
loader: extractSASS.extract(['css', 'postcss!sass?config=sassLoaderConfig'])
// 在loader中先用的放右边,后用的放左边
}
坚持原创技术分享,您的支持将鼓励我继续创作!