Webpack 中的相对 CSS url
Relative CSS urls in Webpack
Webpack + file-loader + sass-loader 无法解析 CSS 背景图片的相对路径。
编译后的 SCSS 文件包含相对于 /dist/
而不是 SCSS/CSS 文档的背景图像路径。我研究了这个问题; sass-loader 建议使用 resolve-url-loader(带有源映射)。但是,添加 resolve-url-loader 对编译后的 CSS.
没有影响
我已经能够通过在文件加载器上将 'publicPath' 设置为“../..”来解决问题。或者通过禁用 css-loader 上的 'url' 设置。两者都不是一个好的解决方案,并且会导致通过 HTML 或其他来源复制文件和引用图像时出现问题。
Webpack 和 CSS 的在线示例将 CSS 和图像放在同一文件夹中(通常在根目录中)。这不是我的 webpack 实现的最佳选择。在子文件夹中构建文件的概念似乎是一个相当基本的要求。这只是错误的方法吗?
运行 Webpack ^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);
}
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
选项可以解决这个问题。
{
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 生成相对于输出目录的路径,而不是输出 css 文件。
你可以使用css-url-relative-plugin来解决这个问题,它会通过重新计算输出css和资产文件的关系,用正确的相对路径替换url(...)
。
Webpack + file-loader + sass-loader 无法解析 CSS 背景图片的相对路径。
编译后的 SCSS 文件包含相对于 /dist/
而不是 SCSS/CSS 文档的背景图像路径。我研究了这个问题; sass-loader 建议使用 resolve-url-loader(带有源映射)。但是,添加 resolve-url-loader 对编译后的 CSS.
我已经能够通过在文件加载器上将 'publicPath' 设置为“../..”来解决问题。或者通过禁用 css-loader 上的 'url' 设置。两者都不是一个好的解决方案,并且会导致通过 HTML 或其他来源复制文件和引用图像时出现问题。
Webpack 和 CSS 的在线示例将 CSS 和图像放在同一文件夹中(通常在根目录中)。这不是我的 webpack 实现的最佳选择。在子文件夹中构建文件的概念似乎是一个相当基本的要求。这只是错误的方法吗?
运行 Webpack ^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);
}
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
选项可以解决这个问题。
{
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 生成相对于输出目录的路径,而不是输出 css 文件。
你可以使用css-url-relative-plugin来解决这个问题,它会通过重新计算输出css和资产文件的关系,用正确的相对路径替换url(...)
。