Webpack 2和SASS：@导入到另一个SASS文件时，SASS脚本找不到其字体依赖项

Question

我想深入研究使用Webpack 2和Materialize进行的现代前端开发。 因为我可能会自定义样式，所以我想将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和Materialize提供的字体文件）中获得了所需的输出。 但是正如我所说，我想将Materialize导入到我自己的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() Materialise SASS文件，为什么编译会起作用？ 当我将Materialize SASS文件导入自己的SASS文件时，为什么会失败？ 我该如何更改Webpack配置，以便它可以找到字体文件？

Answer 1

我偶然发现，物化提供了一个变量来设置字体路径，因此调整我自己的SASS文件就解决了问题

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