我的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另一个文件,并使用该文件的文件夹作为主文件夹,以便其相对路径按预期工作?
使用
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";
[$fa-font-path
中显示font-awesome/scss/_variables.scss
变量的位置
$fa-font-path: "../fonts" !default;
似乎没有任何方法可以@import文件在SCSS \ SASS中具有各自的相对路径。
因此,我设法让this开始工作:
在我的.js或.jsx文件中导入scss \ css字体真棒文件,not我的样式表文件:
import'font-awesome / scss / font-awesome.scss';
将此添加到我的webpack.config文件:
模块:{装载机:[{test:/ \。js?$ /,加载器:“ babel-loader?cacheDirectory”,排除:/(node_modules | bower_components)/},{test:/ \。jsx?$ /,加载器:“ babel-loader?cacheDirectory”,排除:/(node_modules | bower_components)/},{test:/ \。scss?$ /,加载器:['style-loader','css-loader','sass-loader']},{test:/\.svg(\?v=\d+\.\d+\.\d+)?$/,加载程序:“ file-loader?mimetype = image / svg + xml'},{test:/ \。woff(\?v = \ d + \。\ d + \。\ d +)?$ /,加载程序:“ file-loader?mimetype = application / font-woff”},{test:/ \。woff2(\?v = \ d + \。\ d + \。\ d +)?$ /,加载程序:“ file-loader?mimetype = application / font-woff”},{test:/ \。ttf(\?v = \ d + \。\ d + \。\ d +)?$ /,加载器:“文件加载器?mimetype = application / octet-stream”}},{test:/ \。eot(\?v = \ d + \。\ d + \。\ d +)?$ /,加载程序:“文件加载程序”},]}
以下为我工作:
$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';
对我有用的是添加resolve-url-loader
并启用sourceMaps
我已经在我的根.scss
文件中导入了真棒字体:
@import "~font-awesome/scss/font-awesome";
...
此根文件被导入到我的main.js
文件中,该文件定义为Webpack的入口点:
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-277514138https://github.com/rails/webpacker/issues/384#issuecomment-301318904
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';
请参阅角度网站以获取说明Include Font Awesome