首页 文章

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

提问于
浏览 次
2

我有一些麻烦来理解文件路径解析的工作原理 . 我以标准方式使用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 .

谢谢你的帮助！ :)

css fonts sass webpack

1 回答

  • 0

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

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

    因此，您可以尝试将其更改为 [name].min.css 并在其他位置指定输出位置 .

    回复于

相关问题