Webpack 2和SASS：一个SASS脚本无法find它的字体依赖关系时，它是@导入到另一个SASS文件
我想利用Webpack 2和Materialise挖掘现代前端开发。 因为我可能会自定义样式，所以我想将Materialise SASS文件导入到我自己的SASS文件中，这样我就可以覆盖东西了。 但是，如果我这样做，Webpack 2无法编译我的SASS文件了，因为它没有findMaterialize字体。
这是我目前的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 ...
由于在文件path的前面，加载程序在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无法find字体文件。 这是发生的许多错误之一
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()物化SASS文件直接？ 为什么当我将Materialise SASS文件导入到我自己的SASS文件时会失败？ 我如何改变我的Webpackconfiguration，以便它可以find字体文件？
偶然发现物化提供了一个variables来设置字体path，所以调整我自己的SASS文件来解决这个问题
$roboto-font-path: "~materialize-css/fonts/roboto/" !default; @import "~materialize-css/sass/materialize"; // ... my customizations ...