Question

我想深入研究使用Webpack 2和Materialize的现代前端开发。因为我可能会自定义样式，所以我想将@import Materialize SASS文件放入我自己的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提供的字体文件中获得了所需的输出。但正如我所说，我想将Materialise导入我自己的SASS文件，看起来像这样（src/scss/main.scss）：

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

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

然后我有两种可能性将我的SASS文件包含在我的Webpack包中：更改我的require()中的index.js调用以导入该文件而不是materialize.scss文件或更改entry至

中的webpack.config.js密钥

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文件就解决了这个问题

var result = myQuery.ToList();

Webpack 2和SASS：当一个SASS脚本被@imported到另一个SASS文件时，它找不到它的字体依赖性

1 个答案: