小编tom*_*jan的帖子

Webpack和Sass正确处理后台:url()图像但是当与webpack-dev-server一起使用时找不到它

我正在使用Webpack 2和webpack-dev-server以及Sass加载器,实际配置:

{
    test: /\.scss/,
    loaders: [
        "style",
        { loader: "css", query: { modules: false, sourceMap: true } },
        { loader: "resolve-url" },
        { loader: "sass", query: { sourceMap: true } }
    ]
}
Run Code Online (Sandbox Code Playgroud)

这非常有效,并且引用的图像background: url()由webpack处理,并且也可以替换为类似的样式background-somehash.jpg,可以通过键入来访问此文件http://localhost:8080/background-somehash.jpg.当我使用开发人员工具在样式背景定义中提供整个URL(包括localhost)时,它也有效...

唯一不起作用的是webpack生成的原始css,看起来像background: url(background-somehash.jpg).我也尝试过各种URL像./,../,../../或./images/尝试,如果根被设置在某种程度上有所不同.我没有得到的是该文件在根目录下可用...

编辑: 当与extract-text-webpack-plugin提取样式一起使用到单独的真实styles.css文件中时,它工作得很好.问题是为什么当从javascript包提供最终的css时它不起作用?

澄清: 一切都正确引用,图像是可用的,它所有的作品,当我使用CSS提取到单独的文件,extract-text-webpack-plugin它只是当完全一样的CSS是每天从不起作用bundle.js这是在当时引用的index.html像<link href="blob:..." rel="stylesheet">

css sass webpack sass-loader css-loader

5
推荐指数
1
解决办法
1114
查看次数

标签 统计

css ×1

css-loader ×1

sass ×1

sass-loader ×1

webpack ×1