Webpack 4: css-loader + file-loader 在构建过程中添加字体及其样式表
Webpack 4: css-loader + file-loader to add fonts and their stylesheets in the build process
鉴于此设置:
fonts/styles.css
@font-face {
family: 'MyFont';
src: url('fonts/myfont.otf');
}
我怎样才能:
- 在我的 JS 包中,获取对 CSS 文件的 URL 的引用,作为字符串,例如
[name].[hash].css
- 生成的 CSS 文件应该是普通的 CSS 文件,但是
url()
s 指向生成的 webfont 文件?
类似于:
@font-face {
family: 'MyFont';
src: url('myfont.dds9394u329d9sa9r8439.otf');
}
我正在尝试:
webpack.config.js
{
test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
loader: 'file-loader',
include: [/fonts/]
},
{
test: /\.css$/,
use: ['file-loader', 'css-loader'],
include: [/fonts/]
}
JS文件
const myfont = {
family: 'MyFont',
stylesheet: require('fonts/styles.css')
}
根据 ,使用 file-loader
和 require()
可以很好地为 CSS 获取 URL,但生成的文件并不简单CSS.
如何组合 file-loader
和 css-loader
(可能还有其他加载程序)来获取此 CSS 文件?
谢谢!
P.S。我想为此避免 copy-webpack-plugin
,因为我希望 CSS / 字体文件在代码中被散列和寻址。
为了后代:这是我能够获得我正在寻找的结果的 Webpack 配置。
module: {
rules: {
// Font stylesheets
{
test: /\.css$/,
use: [
{
loader: 'file-loader',
options: {
name: 'css/[hash].[ext]'
}
},
'extract-loader',
'css-loader',
'postcss-loader'
],
include: [/fonts/]
},
// Font files
{
test: /\.(woff|woff2|ttf|otf)$/,
loader: 'file-loader',
include: [/fonts/],
options: {
name: '[hash].[ext]',
outputPath: 'css/',
publicPath: url => '../css/' + url
}
},
}
}
我知道自问这个问题以来已经有一段时间了,但与 Dan 一样,我将此留给后代。
所以这是适用于我的情况的设置:
const path = require("path");
module.exports = (env, argv) => ({
...
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", {loader: "css-loader", options: {modules: true}}],
exclude: /node_modules/,
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: (url, resourcePath, context) => {
if(argv.mode === 'development') {
const relativePath = path.relative(context, resourcePath);
return `/${relativePath}`;
}
return `/assets/fonts/${path.basename(resourcePath)}`;
}
}
}
]
}]
}
});
可在此处找到完整的工作设置:
https://github.com/przemek-nowicki/multi-page-app-with-react/blob/master/webpack.config.js
鉴于此设置:
fonts/styles.css
@font-face {
family: 'MyFont';
src: url('fonts/myfont.otf');
}
我怎样才能:
- 在我的 JS 包中,获取对 CSS 文件的 URL 的引用,作为字符串,例如
[name].[hash].css
- 生成的 CSS 文件应该是普通的 CSS 文件,但是
url()
s 指向生成的 webfont 文件?
类似于:
@font-face {
family: 'MyFont';
src: url('myfont.dds9394u329d9sa9r8439.otf');
}
我正在尝试:
webpack.config.js
{
test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
loader: 'file-loader',
include: [/fonts/]
},
{
test: /\.css$/,
use: ['file-loader', 'css-loader'],
include: [/fonts/]
}
JS文件
const myfont = {
family: 'MyFont',
stylesheet: require('fonts/styles.css')
}
根据 file-loader
和 require()
可以很好地为 CSS 获取 URL,但生成的文件并不简单CSS.
如何组合 file-loader
和 css-loader
(可能还有其他加载程序)来获取此 CSS 文件?
谢谢!
P.S。我想为此避免 copy-webpack-plugin
,因为我希望 CSS / 字体文件在代码中被散列和寻址。
为了后代:这是我能够获得我正在寻找的结果的 Webpack 配置。
module: {
rules: {
// Font stylesheets
{
test: /\.css$/,
use: [
{
loader: 'file-loader',
options: {
name: 'css/[hash].[ext]'
}
},
'extract-loader',
'css-loader',
'postcss-loader'
],
include: [/fonts/]
},
// Font files
{
test: /\.(woff|woff2|ttf|otf)$/,
loader: 'file-loader',
include: [/fonts/],
options: {
name: '[hash].[ext]',
outputPath: 'css/',
publicPath: url => '../css/' + url
}
},
}
}
我知道自问这个问题以来已经有一段时间了,但与 Dan 一样,我将此留给后代。
所以这是适用于我的情况的设置:
const path = require("path");
module.exports = (env, argv) => ({
...
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", {loader: "css-loader", options: {modules: true}}],
exclude: /node_modules/,
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: (url, resourcePath, context) => {
if(argv.mode === 'development') {
const relativePath = path.relative(context, resourcePath);
return `/${relativePath}`;
}
return `/assets/fonts/${path.basename(resourcePath)}`;
}
}
}
]
}]
}
});
可在此处找到完整的工作设置: https://github.com/przemek-nowicki/multi-page-app-with-react/blob/master/webpack.config.js