我有以下 Webpack 配置(大致上,它已经为这篇文章简化了):
const rootPublic = path.resolve('./public');
const LOCAL_IDENT_NAME = 'localIdentName=[name]_[local]_[hash:base64:5]';
const CSS_LOADER = `css?sourceMap&${LOCAL_IDENT_NAME}&root=${rootPublic}`;
const SASS_LOADER = 'sass?sourceMap&includePaths[]=' + path.resolve(__dirname, './src/styles');
// ... loaders:
loaders: [
{
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'url-loader?limit=10000&name=[path][name].[ext]'
},
{
test: /\.scss$/,
loader: config.DEVELOPMENT_MODE ? `style!${CSS_LOADER}!autoprefixer!${SASS_LOADER}`
: ExtractTextPlugin.extract('style', `${CSS_LOADER}!autoprefixer!${SASS_LOADER}`)
}, // ...
]
现在这对于在 scss 文件中通常引用的图像非常有效:
.some-static-class {
background: url('/images/bg.png');
}
但是,在使用指令时它不起作用::local
:local .SomeClass {
background: url('/images/bg.png');
}
我认为那是因为root
它是为 CSS 加载器定义的。我得到一个构建错误:Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../images/bg.gif
相反,如果我root
从 css-loader 配置中删除,那么它构建得很好,但是在 Chrome 的检查器中路径“看起来”是正确的,但是当你实际在新选项卡中打开链接时,它指向:chrome-devtools://devtools/bundled/"/images/bg.png"
这显然不能正确解析.
我不确定问题是否出在url-loader
配置上,或者到底发生了什么。
我尝试了不同的 webpack 配置来指定 resolve.root、resolve.modulesDirectories 等,但完全不确定它们是否有任何影响,或者我是否完全错误。我也遇到过,resolve-url-loader
但不确定这是否是我所需要的。
有任何想法吗?大都会!
更新
我应该注意,它在 Safari 中运行良好,但在 Chrome 中却不行。所以这似乎是一个特定于 Chrome 的错误,但必须在 Safari 中完成所有开发是不切实际的。
我还遇到了vue-style-loader,它是 style-loader 的一个分支,声称可以解决这个问题,但它修复它的方式是依赖于一个 hacky 已弃用的 escape/unescape 方法。