使用 postcss 和 scss 解析嵌套样式文件中的相对 url

Question

我正在使用带有scss synthax的postcss来组织项目中的样式。下面列出的简化结构：

client
  media
    images
      image.png
  styles
    index.scss
    components
      component1.scss

Webpack loaders 的入口点是 client/styles/index.scss。

如果我使用 url(( 语句定义一些样式，并带有图像的相对路径.png - 例如 url('../media/images/image.png'((例如 - 在 index.scss 中 background-image 属性中(它将得到很好的解决。

但是如果我在嵌套样式文件 - styles/components/component1.scss - url('../../media/images/image.png'( 由 index.scss 导入 — Webpack 将抛出一个错误：

Module not found: Error: Can't resolve '../../media/images/image.png' in '/Users/anubis/Projects/Jackal/client/styles'

似乎加载程序处理具有条目样式文件路径的所有嵌套文件中的相对 url。如何改变这种行为？

{
  test: /.scss$/,
  use: [
    { loader: 'style-loader' },
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        sourceMap: true,
        minimize: true
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        parser: scssParser,
        sourceMap: true,
        plugins: () => [
          require('precss')({
            import: {
              resolve: styleFileResolver
            }
          }),
          require('postcss-font-magician')({
            hosted: ['./client/media/fonts/OpenSans']
          }),
          require('postcss-short')(),
          require('postcss-cssnext')(),
          require('postcss-utilities')()
        ]
      }
    }
  ]
}

Answer 1

你缺少一个resolve-url-loader。您可以尝试在 css 和 postcss 加载器之间添加它