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

问题描述

我的 node_modules 文件夹中有 font-awesome，所以我尝试将它导入到我的主 .scss 文件中，如下所示:

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

但是Webpack打包编译失败，告诉我

错误:无法解析文件"或目录"../fonts/fontawesome-webfont.eot

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

如何告诉 scsswebpack 以@import 另一个文件，并使用该文件的文件夹作为主文件夹，使其相对路径按预期工作?

解决方案

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

所以我设法让这个工作:

• 在我的 .js 或 .jsx 文件中导入 scss css font-awesome 文件，不是我的样式表文件:

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

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

<前>模块:{装载机:[{test:/.js?$/, loader: 'babel-loader?cacheDirectory', 排除:/(node_modules|bower_components)/},{test:/.jsx?$/, loader: 'babel-loader?cacheDirectory', 排除:/(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"},]}

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";

But Webpack bundling compilation fails, telling me

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

because the font-awesome.scss file refers to a relative path, '../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?

解决方案

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:

• Import the scss css font-awesome file in my .js or .jsx files, not my stylesheet files:

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

• 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屋！