javascript - Webpack 2 和 SASS : A SASS script can't find its font dependencies when it is @imported to another SASS file

Question

我想深入研究使用 Webpack 2 和 Materialise 的现代前端开发。因为我可能会自定义样式，所以我想将 Materialize SASS 文件@import 导入到我自己的 SASS 文件中，这样我就可以覆盖内容。但是，如果我这样做，Webpack 2 将无法再编译我的 SASS 文件，因为它找不到 Materialize 字体。

这是我当前的webpack.config.js，从互联网上复制粘贴:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractSass = new ExtractTextPlugin({
    filename: "style.css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: __dirname + '/public/dist',
        filename: 'app.js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: extractSass.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }, {
                        loader: "resolve-url-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=80000&mimetype=application/font-woff'
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader'
            }
        ]
    },
    plugins: [
        extractSass
    ]
};

我通过 npm 安装了 materialize-css。如果我将以下内容放入 src/js/index.js 文件中，编译工作正常:

require('materialize-css/sass/materialize.scss');

我在 public/dist 目录中获得了所需的输出(app.js、style.css 以及 Materialise 提供的字体文件)。但正如我所说，我想将 Materialise 导入到我自己的 SASS 文件中，该文件看起来像这样 (src/scss/main.scss):

@import "~materialize-css/sass/materialize";
// ... overwrite some stuff here ...

由于文件路径前面的~，加载器会在node_modules目录中查找文件，因此会出现materialize.scss 文件可以成功导入。

然后，我有两种可能性将我的 SASS 文件包含在我的 Webpack 包中:或者更改 index.js 中的 require() 调用来导入该文件，而不是materialize.scss 文件或将 webpack.config.js 中的 entry 键更改为

entry: [
    './src/js/index.js',
    './src/scss/main.scss'
],

无论哪种方式，编译都会失败，因为 Webpack 找不到字体文件。这是发生的众多错误之一

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./~/resolve-url-loader!./src/scss/main.scss
Module not found: Error: Can't resolve '../fonts/roboto/Roboto-Thin.woff2' in 'C:\Users\Myname\Documents\Projects\webpack-test\src\scss'
 @ ./~/css-loader!./~/sass-loader/lib/loader.js!./~/resolve-url-loader!./src/scss/main.scss 6:75477-75521
 @ ./src/scss/main.scss
 @ multi ./src/js/index.js ./src/scss/main.scss

所以这就是我陷入困境的地方。如果我直接 require() Materialize SASS 文件，为什么编译可以工作？为什么我将 Materialise SASS 文件导入到我自己的 SASS 文件时会失败？我必须如何更改我的 Webpack 配置才能找到字体文件？

Answer 1

偶然发现materialize提供了一个变量来设置字体路径，所以调整我自己的SASS文件解决了这个问题

$roboto-font-path: "~materialize-css/fonts/roboto/" !default;
@import "~materialize-css/sass/materialize";
// ... my customizations ...