Question

我遇到了一些麻烦，无法理解文件路径解析的工作原理。我以标准方式使用CSS和SASS加载器：

var ExtractTextPlugin = require（'extract-text-webpack-plugin'）;

module: {
    loaders: [
        { test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') }
    ]
},
plugins: [
    new ExtractTextPlugin('build/[name].min.css', {
        allChunks: true
    })
]

所以，我希望我的所有SASS都可以在build/app.min.css文件中编译和渲染。它运作良好。除了我遇到字体加载和包含问题。

让我们考虑一下/src/sass/style.scss文件，我想要包含字体真棒的SASS文件，如下所示：

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

它不起作用。然而，如果我使用相对路径，例如：

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

有效。

然后，我想更改font-awesome字体路径以匹配正确的文件夹：

$fa-font-path: '~font-awesome/fonts';

它也有效。对我来说这似乎是合乎逻辑的，因为据我理解的概念，~指的是node_modules文件夹。

那么，为什么它适用于字体路径而不是SASS导入？我也想使用~表示法，因为这是一个由多个项目使用的文件，其中一些需要../../../node_modules。

感谢您的帮助！：）

Answer 1

哇，你写的文章让我的生活在Webpack上变得更加轻松，我有幸帮助你回报。

我认为这里的问题是与ExtractTextPlugin一起使用的第一个参数不应该指定文件路径，只是文件位置。

因此，您可以尝试将其更改为{{1}}并在其他位置指定输出位置。

了解Webpack SASS加载程序和文件路径

1 个答案: