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

Question

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

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

Webpack 加载器的入口点是 client/styles/index.scss.

如果我用 url() 语句定义一些样式，相对路径为 image.png - 比如 url('../media/images/image.png') （对于示例 - 在 background-image 属性) 中 index.scss 它将被很好地解析。

但是如果我在嵌套样式文件中做同样的事情 - 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'

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

{
  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 loaders

之间添加它

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

Resolving relative urls in nested style files with postcss & scss

sass

webpack

postcss

css-loader

postcss-loader