Webpack relative css url() with file-loader / css-loader
Webpack relative css url() with file-loader / css-loader
我是 webpack/npm 的新手,我正在努力了解如何在其他项目依赖项中使用 css url。
文件夹结构
src
fonts/
scss/
app.scss
js/
app.js
img/
index.html
webpack.config.js
var path = require('path');
var extractPlugin = require('extract-text-webpack-plugin');
var cleanWebpackPlugin = require('clean-webpack-plugin');
var htmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");
module.exports = {
entry: './src/js/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/app.js'
},
devServer: {
stats: 'errors-only',
compress: true,
open: true,
port: 9000
},
module: {
rules: [
// ES6 -> ES5 transpiler
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
// SCSS to CSS -> Autoprefix -> Load CSS
{
test: /\.(scss|css)$/,
use: extractPlugin.extract({
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [require('autoprefixer')()]
}
},
'sass-loader'
]
})
},
// HTML Loader
{
test: /\.html$/,
use: ['html-loader']
},
// Image Loader
{
test: /\.(jpg|png|svg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'img/',
name: '[name].[ext]'
}
}
]
},
// Font Loader
{
test: /\.(eot|ttf|woff)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts/',
name: '[name].[ext]'
}
}
]
}
]
},
plugins: [
new extractPlugin({filename: 'scss/app.css'}),
new cleanWebpackPlugin(['dist']),
new htmlWebpackPlugin({ template: 'src/index.html' }),
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' })
]
};
我已经成功地将 lightGallery 包含在我的项目中,如下所示:
app.js
import 'lightgallery';
app.scss
@import '~lightgallery/dist/css/lightgallery.css';
Light Gallery 样式表引用了我使用 webpack file-loader
成功加载到 fonts/
中的字体
我的问题是构建的 css 文件试图引用 scss 文件夹中的相关字体,而不是我的根目录。
即:http://localhost:9000/scss/img/loading.gif
我需要从 css 链接到的所有资产从我的根目录
解析
即http://localhost:9000/img/loading.gif
我是否可以配置我的 css-loader 以在所有 url 的前面加上 /
?
求助!
file-loader
尊重output.publicPath
,但因为你没有设置它,结果路径将是一个相对路径。您可以将 public 路径设置为 /
.
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/app.js',
publicPath: '/'
},
这也会影响处理任何资产的其他加载器和插件。这通常是您想要的,因此推荐,但如果您只想为特定文件更改它,您可以使用 file-loader
上的 publicPath
选项。
{
loader: 'file-loader',
options: {
outputPath: 'img/',
name: '[name].[ext]',
publicPath: '/'
}
}
我是 webpack/npm 的新手,我正在努力了解如何在其他项目依赖项中使用 css url。
文件夹结构
src
fonts/
scss/
app.scss
js/
app.js
img/
index.html
webpack.config.js
var path = require('path');
var extractPlugin = require('extract-text-webpack-plugin');
var cleanWebpackPlugin = require('clean-webpack-plugin');
var htmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");
module.exports = {
entry: './src/js/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/app.js'
},
devServer: {
stats: 'errors-only',
compress: true,
open: true,
port: 9000
},
module: {
rules: [
// ES6 -> ES5 transpiler
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
// SCSS to CSS -> Autoprefix -> Load CSS
{
test: /\.(scss|css)$/,
use: extractPlugin.extract({
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [require('autoprefixer')()]
}
},
'sass-loader'
]
})
},
// HTML Loader
{
test: /\.html$/,
use: ['html-loader']
},
// Image Loader
{
test: /\.(jpg|png|svg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'img/',
name: '[name].[ext]'
}
}
]
},
// Font Loader
{
test: /\.(eot|ttf|woff)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts/',
name: '[name].[ext]'
}
}
]
}
]
},
plugins: [
new extractPlugin({filename: 'scss/app.css'}),
new cleanWebpackPlugin(['dist']),
new htmlWebpackPlugin({ template: 'src/index.html' }),
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' })
]
};
我已经成功地将 lightGallery 包含在我的项目中,如下所示:
app.js
import 'lightgallery';
app.scss
@import '~lightgallery/dist/css/lightgallery.css';
Light Gallery 样式表引用了我使用 webpack file-loader
fonts/
中的字体
我的问题是构建的 css 文件试图引用 scss 文件夹中的相关字体,而不是我的根目录。
即:http://localhost:9000/scss/img/loading.gif
我需要从 css 链接到的所有资产从我的根目录
解析即http://localhost:9000/img/loading.gif
我是否可以配置我的 css-loader 以在所有 url 的前面加上 /
?
求助!
file-loader
尊重output.publicPath
,但因为你没有设置它,结果路径将是一个相对路径。您可以将 public 路径设置为 /
.
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/app.js',
publicPath: '/'
},
这也会影响处理任何资产的其他加载器和插件。这通常是您想要的,因此推荐,但如果您只想为特定文件更改它,您可以使用 file-loader
上的 publicPath
选项。
{
loader: 'file-loader',
options: {
outputPath: 'img/',
name: '[name].[ext]',
publicPath: '/'
}
}