Webpack.config之前没有运行萨斯 - 装载机PostCSS-装载机
我的配置文件目前有以下可能相关的代码:Webpack.config之前没有运行萨斯 - 装载机PostCSS-装载机
{
// do not exclude `node_modules`
test: /\.css$/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css',
{ publicPath: '../' }
)
},
{
test: /\.scss$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract(
'style-loader',
['css-loader', 'postcss-loader', 'sass-loader'],
{ publicPath: '../' }
)
},
,我第一次运行青菜装载机因为PostCSS装载机(Autoprefixer)是很重要无法访问我拥有的@mixin中的代码。
到目前为止,我已经无法给相关的供应商前缀适用于要导入的@mixin代码。一切正常,如果我移动@mixin码的地方,我@include这符合市场预期。
对于的WebPack 1提取物函数需要两个参数。
,当你不提取的CSS文件(后备)的第一个参数将被应用。
第二个参数是由一个感叹号(!)
分离装载机的列表,这些装载机从右向左施加。
ExtractTextPlugin.extract(
'style-loader',
'css-loader!postcss-loader!sass-loader'
);
对于的WebPack 2:
的ExtractTextPlugin期待一个装载机或一个对象。
ExtractTextPlugin.extract(options: loader | object)
例子:
{
test: /\.scss$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: [
"css-loader",
"postcss-loader",
"sass-loader"
]
})
}
感谢您的回复。我在Webpack 1上,并且将我的代码与第一个示例中的代码相匹配。我已经测试过它,但仍然显示我的mixins中的CSS没有通过postcss/autoprefixer达到。 –
我在我的代码中发现的问题。我的入口点文件,其中SCSS文件正在导入,导入了这样:
import styles from '!style-loader!css!sass!postcss-loader!./styles/styles.scss'
这是覆盖在我的webpack.config文件的配置,所以我只是改变了我所有的进口线有正确的加载程序顺序。
装载机就像函数一样,这就是为什么它是从右到左。当你使用这个“style!css”时,想象它们就像函数:style(css(file))...在这种情况下,首先调用css。 – TGarrett
嗨,是的,我尝试了重新排序它们以及用'postLoaders'搞乱。我在webpack 1.14.0上。请让我知道你想要什么样的信息!我会尽我所能彻底。 –
阅读我更新的编辑。这应该会帮助你多一点。另外,先调用另一个的问题是什么?你的css和scss不应该有任何样式的问题,不管你真的使用什么顺序... – TGarrett