node.js 如何使用相对路径在 Webpack 中使用 SCSS (SASS) 加载 font-awesome？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33649761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I load font-awesome using SCSS (SASS) in Webpack using relative paths?
提问by Richard
I have font-awesome in my node_modules folder so I try to import it in my main .scss file like so:
我的 node_modules 文件夹中有 font-awesome，所以我尝试将它导入到我的主 .scss 文件中，如下所示：
@import "../../node_modules/font-awesome/scss/font-awesome.scss";
But Webpack bundling compilation fails, telling me
但是Webpack打包编译失败，告诉我
Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot
because the font-awesome.scss file refers to a relative path, '../fonts/'.
因为 font-awesome.scss 文件引用了一个相对路径，'../fonts/'。
How can I tell scss \ webpack to @import another file, and use that file's folder as the home folder so that its relative paths work as it expects?
我如何告诉 scss \ webpack @import 另一个文件，并使用该文件的文件夹作为主文件夹，以便其相对路径按预期工作？
采纳答案by Richard
There doesn't appear to be any way to @import files that have their own relative paths in SCSS \ SASS.
似乎没有任何方法可以 @import 文件在 SCSS \ SASS 中有自己的相对路径。
So instead I managed to get thisto work:
所以不是我设法得到这个工作：
Import the scss \ css font-awesome file in my .js or .jsx files, notmy stylesheet files:
import 'font-awesome/scss/font-awesome.scss';
Add this to my webpack.config file:
在我的 .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"},
]
}
回答by user137794
Use
用
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";
where the $fa-font-pathvariable is seen in font-awesome/scss/_variables.scss
在哪里$fa-font-path可以看到变量font-awesome/scss/_variables.scss
$fa-font-path: "../fonts" !default;
The tilde "~" is interpolated by sass-loader using the webpack mecanism.
波浪号“~”由 sass-loader 使用webpack mecanism 插入。
回答by Yogesh Agrawal
Following worked for me:
以下对我来说有效：
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";
This is to import the font-awesome& required fonts in the project.
Other change is in webpackconfigurations, to load required fonts using file-loader.
这是font-awesome在项目中导入& 所需的字体。其他更改是在webpack配置中，使用file-loader.
{
test: /\.scss$/,
loaders: ['style', 'css?sourceMap', 'sass'
],
}, {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
loader: 'file'
}
回答by Wilk
Resolved by changing my app.scss:
通过更改我的解决方案app.scss：
@import '~font-awesome/scss/_variables.scss';
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';
This way is useful to keep external dependencies unchanged and unversioned.
这种方式对于保持外部依赖项不变和无版本很有用。
回答by ramon22
I just set the path in my main scss file and it works :
我只是在我的主 scss 文件中设置了路径，它可以工作：
$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';
回答by Excellence Ilesanmi
What worked for me was to add resolve-url-loaderand enable sourceMaps
对我有用的是添加resolve-url-loader和启用sourceMaps
I already imported font-awesome in my root .scssfile:
我已经在我的根.scss文件中导入了 font-awesome ：
@import "~font-awesome/scss/font-awesome";
...
This root file is imported in my main.jsfile defined as Webpack's entrypoint:
这个根文件被导入到我main.js定义为 Webpack 入口点的文件中：
import './scss/main.scss';
...
Then my final webpack module rules look like so:
然后我最终的 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]', },
}
...
Note:
笔记：
I used mini-css-extract-plugin, which can be registered like this:
我用过mini-css-extract-plugin，可以这样注册：
new MiniCssExtractPlugin({
filename: 'css/main.css',
chunkFilename: '[id].[hash]',
}),
url-loaderrequires file-loaderto be installed, so if you get an error like: cannot find module file-loader, then just install it:
url-loader需要file-loader安装，所以如果你收到类似的错误：cannot find module file-loader，然后安装它：
npm i -D file-loader
Useful Links:
有用的链接：
https://github.com/webpack/webpack/issues/2771#issuecomment-277514138https://github.com/rails/webpacker/issues/384#issuecomment-301318904
https://github.com/webpack/webpack/issues/2771#issuecomment-277514138 https://github.com/rails/webpacker/issues/384#issuecomment-301318904
回答by Muhammad
This is how it worked for me, the trick is to set $fa-font-pathto the path of the fonts as following.
这就是它对我的工作方式，诀窍是设置$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';
Note: Please check your fonts folder in node_modulesin my case it is @fortawesome/fontawesome-free
注意：node_modules在我的情况下，请检查您的字体文件夹@fortawesome/fontawesome-free
回答by Koudi
v.4 (symofony 4 + webpack)
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';
回答by Vitaliy Markitanov
See angular site for instructions Include Font Awesome
有关说明，请参阅 angular 站点 包括 Font Awesome
