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 ...