如何使用相对路径在Webpack中使用SCSS(SASS)加载超棒的字体? [英] How do I load font-awesome using SCSS (SASS) in Webpack using relative paths?

问题描述

我的node_modules文件夹中的字体很棒，因此我尝试将其导入到主.scss文件中，如下所示:

I have font-awesome in my node_modules folder so I try to import it in my main .scss file like so:

@import "../../node_modules/font-awesome/scss/font-awesome.scss";

但是Webpack捆绑编译失败，告诉我

But Webpack bundling compilation fails, telling me

Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot 

因为font-awesome.scss文件引用了相对路径'../fonts/'.

because the font-awesome.scss file refers to a relative path, '../fonts/'.

如何告诉scss \ webpack @import另一个文件，并将该文件的文件夹用作主文件夹，以便其相对路径按预期工作?

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?

推荐答案

似乎没有任何方法可以@import在SCSS \ SASS中具有自己的相对路径的文件.

There doesn't appear to be any way to @import files that have their own relative paths in SCSS \ SASS.

因此，相反，我设法使此能够正常工作:

So instead I managed to get this to work:

• 在我的.js或.jsx文件中导入scss \ css字体真棒文件，不我的样式表文件:

import 'font-awesome/scss/font-awesome.scss';    

将此添加到我的webpack.config文件中:

Add this to my webpack.config file:

    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"},
        ]
    }

这篇关于如何使用相对路径在Webpack中使用SCSS(SASS)加载超棒的字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！