Webpack 网页包中的相对CSS URL

Web包+文件加载器+sass加载器在解析CSS背景图像的相对路径时遇到问题

编译后的SCSS文件包含背景图像的路径，该路径相对于

/dist/

，而不是相对于SCSS/CSS文档。我研究了这个问题；sass加载器建议使用解析url加载器（带源映射）。但是，添加ResolveURL加载程序对编译的CSS没有任何影响

我已经能够通过在文件加载器上将“publicPath”设置为“../…”来解决这个问题。或者通过禁用css加载程序上的“url”设置。两者都不是一个好的解决方案，都会导致通过HTML或其他来源复制文件和引用图像的问题

Webpack和CSS的在线示例将CSS和图像放在同一个文件夹中（通常在根目录中）。这不是我的Web包实现的最佳选择。在子文件夹中构建文件的概念似乎是一个相当基本的要求。这仅仅是错误的方法吗

正在运行网页包^3.5.1。Sass加载程序^6.0.6。文件加载器^0.11.2。Css加载器^0.28.4

文件结构

example/
├── dist/
│   ├── assets
│   │   ├── media
│   │   │   └── logo.png
│   │   └── styles
│   │       ├── app.css
│   │       └── app.css.map
│   ├── index.html
│   └── app.bundle.js
└── src/
    ├── assets
    │   ├── media
    │   │   └── logo.png
    │   └── styles
    │       └── app.scss
    └── app.js

app.scss

body {
  background: url(../media/logo.png);
}

body {
  background: url(assets/media/logo.png); //This should be ../media/logo.png
}

require('./assets/styles/app.scss');

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            }, {
              loader: 'resolve-url-loader'
            }, {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        })
      }, {
        test: /\.png$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'assets/media/[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'assets/styles/app.css'
    })
  ]
}

app.css

body {
  background: url(../media/logo.png);
}

body {
  background: url(assets/media/logo.png); //This should be ../media/logo.png
}

require('./assets/styles/app.scss');

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            }, {
              loader: 'resolve-url-loader'
            }, {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        })
      }, {
        test: /\.png$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'assets/media/[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'assets/styles/app.css'
    })
  ]
}

app.js

body {
  background: url(../media/logo.png);
}

body {
  background: url(assets/media/logo.png); //This should be ../media/logo.png
}

require('./assets/styles/app.scss');

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            }, {
              loader: 'resolve-url-loader'
            }, {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        })
      }, {
        test: /\.png$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'assets/media/[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'assets/styles/app.css'
    })
  ]
}

webpack.config.js

body {
  background: url(../media/logo.png);
}

body {
  background: url(assets/media/logo.png); //This should be ../media/logo.png
}

require('./assets/styles/app.scss');

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            }, {
              loader: 'resolve-url-loader'
            }, {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        })
      }, {
        test: /\.png$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'assets/media/[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'assets/styles/app.css'
    })
  ]
}

---

ExtractTextPlugin

有一个可以解决此问题的

publicPath

选项

{
  test: /\.scss$/,
  include: [
    path.resolve(__dirname, "src/assets/styles")
  ],
  use: ExtractTextPlugin.extract({
    publicPath: '../../',
    use: [
      {
        loader: 'css-loader',
        options: {
          sourceMap: true
        }
      }, {
        loader: 'sass-loader',
        options: {
          sourceMap: true
        }
      }
    ]
  })
}

---

添加了

include

数组到特定目录中的目标文件。建议用于所有样式表位于同一文件夹中的实例。

url（…）中的路径不正确的原因是相对于输出目录的webpack generate路径，而不是输出css文件

---

您可以使用来解决此问题，它将通过重新计算输出css和资产文件的关系，用正确的相对路径替换

url（…）

。

在我的例子中，

publicPath:'。/'

用于解析相对于输出目录的文件路径资产。