如何使用相对路径在 Webpack 中使用 SCSS (SASS) 加载超赞字体?
How do I load font-awesome using SCSS (SASS) in Webpack using relative paths?
我的 node_modules 文件夹中有很棒的字体,所以我尝试将它导入到我的主 .scss 文件中,如下所示:
@import "../../node_modules/font-awesome/scss/font-awesome.scss";
但是webpack打包编译失败,告诉我
Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot
因为 font-awesome.scss 文件引用了一个相对路径,'../fonts/'。
如何让 scss\webpack @import 另一个文件,并将该文件的文件夹用作主文件夹,以便其相对路径按预期工作?
似乎没有任何方法可以@import 在 SCSS 中有自己的相对路径的文件\ SASS。
所以我设法让 this 开始工作:
在我的 .js 或 .jsx 文件中导入 scss \ css font-awesome 文件,不是 我的样式表文件:
import 'font-awesome/scss/font-awesome.scss';
将此添加到我的 webpack.config 文件中:
module:
{
loaders:
[
{test: /\.js?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
{test: /\.jsx?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
{test: /\.scss?$/, loaders: ['style-loader', 'css-loader', 'sass-loader']},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},
{test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
{test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
]
}
使用
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";
在 font-awesome/scss/_variables.scss
中可以看到 $fa-font-path
变量
$fa-font-path: "../fonts" !default;
波浪号“~”由 sass-loader 使用 the webpack mecanism 插入。
以下对我有用:
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";
这是为了在项目中导入font-awesome
& 所需的字体。
其他变化是 webpack
配置,使用 file-loader
.
加载所需的字体
{
test: /\.scss$/,
loaders: ['style', 'css?sourceMap', 'sass'
],
}, {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
loader: 'file'
}
通过更改我的app.scss
解决:
@import '~font-awesome/scss/_variables.scss';
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';
这种方式对于保持外部依赖关系不变和不受版本控制很有用。
我只是在我的主 scss 文件中设置了路径并且它有效:
$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';
v.4(symofony 4 + webpack)
$fa-font-path: "~components-font-awesome/webfonts";
@import '~components-font-awesome/scss/fa-brands';
@import '~components-font-awesome/scss/fa-regular';
@import '~components-font-awesome/scss/fa-solid';
@import '~components-font-awesome/scss/fontawesome';
对我有用的是添加 resolve-url-loader
并启用 sourceMaps
我已经在根 .scss
文件中导入了 font-awesome:
@import "~font-awesome/scss/font-awesome";
...
这个根文件导入到我定义为 Webpack 入口点的 main.js
文件中:
import './scss/main.scss';
...
那么我最终的 webpack 模块规则是这样的:
...
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{ loader: 'postcss-loader', options: { sourceMap: true }, },
'resolve-url-loader',
{ loader: 'sass-loader', options: { sourceMap: true }, },
],
}, {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: { limit: 1000, name: 'fonts/[name].[ext]', },
}
...
注:
我用的是mini-css-extract-plugin
,可以这样注册:
new MiniCssExtractPlugin({
filename: 'css/main.css',
chunkFilename: '[id].[hash]',
}),
url-loader
需要安装 file-loader
,因此如果您收到类似 cannot find module file-loader
的错误,则只需安装它:
npm i -D file-loader
有用链接:
https://github.com/webpack/webpack/issues/2771#issuecomment-277514138
https://github.com/rails/webpacker/issues/384#issuecomment-301318904
这就是我的工作方式,诀窍是将 $fa-font-path
设置为如下字体路径。
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';
注意:请检查 node_modules
中的字体文件夹,在我的例子中是 @fortawesome/fontawesome-free
对于版本 5.14,以下对我有用:
$fa-font-path : '../node_modules/@fortawesome/fontawesome-free/webfonts';
@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "../node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
我的 node_modules 文件夹中有很棒的字体,所以我尝试将它导入到我的主 .scss 文件中,如下所示:
@import "../../node_modules/font-awesome/scss/font-awesome.scss";
但是webpack打包编译失败,告诉我
Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot
因为 font-awesome.scss 文件引用了一个相对路径,'../fonts/'。
如何让 scss\webpack @import 另一个文件,并将该文件的文件夹用作主文件夹,以便其相对路径按预期工作?
似乎没有任何方法可以@import 在 SCSS 中有自己的相对路径的文件\ SASS。
所以我设法让 this 开始工作:
在我的 .js 或 .jsx 文件中导入 scss \ css font-awesome 文件,不是 我的样式表文件:
import 'font-awesome/scss/font-awesome.scss';
将此添加到我的 webpack.config 文件中:
module: { loaders: [ {test: /\.js?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ }, {test: /\.jsx?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ }, {test: /\.scss?$/, loaders: ['style-loader', 'css-loader', 'sass-loader']}, {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'}, {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"}, {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"}, {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"}, {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"}, ] }
使用
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";
在 font-awesome/scss/_variables.scss
$fa-font-path
变量
$fa-font-path: "../fonts" !default;
波浪号“~”由 sass-loader 使用 the webpack mecanism 插入。
以下对我有用:
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";
这是为了在项目中导入font-awesome
& 所需的字体。
其他变化是 webpack
配置,使用 file-loader
.
{
test: /\.scss$/,
loaders: ['style', 'css?sourceMap', 'sass'
],
}, {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
loader: 'file'
}
通过更改我的app.scss
解决:
@import '~font-awesome/scss/_variables.scss';
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';
这种方式对于保持外部依赖关系不变和不受版本控制很有用。
我只是在我的主 scss 文件中设置了路径并且它有效:
$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';
v.4(symofony 4 + webpack)
$fa-font-path: "~components-font-awesome/webfonts";
@import '~components-font-awesome/scss/fa-brands';
@import '~components-font-awesome/scss/fa-regular';
@import '~components-font-awesome/scss/fa-solid';
@import '~components-font-awesome/scss/fontawesome';
对我有用的是添加 resolve-url-loader
并启用 sourceMaps
我已经在根 .scss
文件中导入了 font-awesome:
@import "~font-awesome/scss/font-awesome";
...
这个根文件导入到我定义为 Webpack 入口点的 main.js
文件中:
import './scss/main.scss';
...
那么我最终的 webpack 模块规则是这样的:
...
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{ loader: 'postcss-loader', options: { sourceMap: true }, },
'resolve-url-loader',
{ loader: 'sass-loader', options: { sourceMap: true }, },
],
}, {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: { limit: 1000, name: 'fonts/[name].[ext]', },
}
...
注:
我用的是mini-css-extract-plugin
,可以这样注册:
new MiniCssExtractPlugin({
filename: 'css/main.css',
chunkFilename: '[id].[hash]',
}),
url-loader
需要安装 file-loader
,因此如果您收到类似 cannot find module file-loader
的错误,则只需安装它:
npm i -D file-loader
有用链接:
https://github.com/webpack/webpack/issues/2771#issuecomment-277514138 https://github.com/rails/webpacker/issues/384#issuecomment-301318904
这就是我的工作方式,诀窍是将 $fa-font-path
设置为如下字体路径。
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';
注意:请检查 node_modules
中的字体文件夹,在我的例子中是 @fortawesome/fontawesome-free
对于版本 5.14,以下对我有用:
$fa-font-path : '../node_modules/@fortawesome/fontawesome-free/webfonts';
@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "../node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";