Question

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

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

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

如果我用url（）语句定义一些带有相对路径到image.png的样式 - 比如url（＆＃39; ../ media / images / image.png＆＃39;）（例如 - 在background-image中index.scss中的它将被解析得很好。

但是如果我在嵌套样式文件中做同样的事情 - styles / components / component1.scss - url（＆＃39; ../../ media / images / image.png＆＃39;），它是由索引导入的.scss - Webpack会抛出一个错误：

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

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

＆＃13;

{
  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')()
        ]
      }
    }
  ]
}

＆＃13;

Answer 1

您错过了resolve-url-loader。您可以尝试在css和postcss加载器之间添加它

使用postcss＆amp ;;解析嵌套样式文件中的相对URL SCSS

1 个答案: