Webpack中的相对CSS网址 [英] Relative CSS urls in Webpack

问题描述

Webpack +文件加载器+ sass-loader无法解决CSS背景图片的相对路径.

Webpack + file-loader + sass-loader is having trouble resolving relative paths for CSS background images.

已编译的SCSS文件包含相对于/dist/而不是相对于SCSS/CSS文档的背景图像的路径.我研究了这个问题； sass-loader建议使用resolve-url-loader(带有源映射).但是，添加resolve-url-loader对编译后的CSS没有影响.

The compiled SCSS file contains a path to the background image that is relative to /dist/ instead of relative to the SCSS/CSS document. I researched this problem; sass-loader recommends using resolve-url-loader (with source maps). However, adding the resolve-url-loader made no difference to the compiled CSS.

通过将文件加载器上的"publicPath"设置为"../.."，我能够解决此问题.或者通过禁用css-loader上的"url"设置.都不是一个好的解决方案，并且会导致通过HTML或其他来源复制文件和引用图像的问题.

I have been able to resolve the issue by setting the 'publicPath' to '../..' on the file-loader. Or by disabling the 'url' setting on the css-loader. Neither is a good solution and causes issues with copying files and referencing images via HTML or other sources.

Webpack和CSS的在线示例将CSS和图像放置在同一文件夹中(通常在根目录中).对于我的webpack实施而言，这不是最佳选择.在子文件夹中结构化文件的概念似乎是一个相当基本的要求.这仅仅是错误的方法吗?

The online examples of Webpack and CSS place the CSS and images in the same folder (often in the root). This is not an optimal choice for my webpack implementation. The concept of structuring files in subfolders seems like a fairly basic requirement. Is this simply the wrong approach?

运行Webpack ^ 3.5.1. Sass加载程序^ 6.0.6.文件加载器^ 0.11.2. CSS载入程序^ 0.28.4.

Running Webpack ^3.5.1. Sass-loader ^6.0.6. File-loader ^0.11.2. Css-loader ^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);
}

app.css

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

app.js

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

webpack.config.js

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选项，可以解决此问题.

ExtractTextPlugin has a publicPath option that can resolve this issue.

{
  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数组添加到特定目录中的目标文件.对于所有样式表都位于同一文件夹中的情况，建议使用

Added include array to target files in a particular directory. Recommended for instances where all stylesheets are located in the same folder.

这篇关于Webpack中的相对CSS网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！