1

我尝试将 mattrial.io 与 webpack 一起使用，正如material.io 的入门中所述，使用以下配置：

webpack.config.js --> 完全一样的例子

const autoprefixer = require('autoprefixer');

module.exports = {
    entry: ['./app.scss'],
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'bundle.css',
                        },
                    },
                    {loader: 'extract-loader'},
                    {loader: 'css-loader'},
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [autoprefixer()]
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sassOptions: {
                                implementation: require('sass'),
                                includePaths: ['./node_modules'],
                            },
                        },
                    }
                ],
            },
        ],
    },
};

app.scss --> 与示例完全一样

@use "~@material/ripple";

.test {
  @include ripple.surface;
  @include ripple.radius-bounded;
  @include ripple.states;
}

包.json

{
    "private": true,
    "scripts": {
        "build": "webpack --config=webpack.config.js"
    },
    "devDependencies": {
        "autoprefixer": "^9.7.4",
        "css-loader": "^3.4.2",
        "extract-loader": "^5.0.1",
        "file-loader": "^6.0.0",
        "postcss-loader": "^3.0.0",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "webpack": "^4.42.0",
        "webpack-cli": "^3.3.11"
    },
    "dependencies": {
        "material-components-web": "^4.0.0"
    }
}

但是，当我运行时，出现npm run build以下错误：

ERROR in ./app.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@use "~@material/ripple";
^
      Can't find stylesheet to import.
  ╷
1 │ @use "~@material/ripple";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  stdin 1:1  root stylesheet
      in /path-to-file/app.scss (line 1, column 1)
 @ multi ./app.scss main[0]

我也试过 gulp 但我得到了同样的错误。

知道如何使它工作吗？

我还为此创建了一个仓库。您可以克隆： https ://github.com/nazari-dev/material.io

4

2 回答 2

2

其实，你并没有听从material.io入门的指示，但如果你跟着做，你就不会成功。基于未解决的问题和其他一些问题，@material有很多问题。特别是它有问题sass-loader。当然，我建议您不要使用它并寻求更好的解决方案。

但是，对于当前的构建错误，请按照以下步骤成功构建：

  1. 构建自定义导入器函数并将其放在 webpack 配置文件的顶部：

    function tryResolve_(url, sourceFilename) {
    try {
        return require.resolve(url, {paths: [path.dirname(sourceFilename)]});
    } catch (e) {
        return '';
    }
}

function tryResolveScss(url, sourceFilename) {
    const normalizedUrl = url.endsWith('.scss') ? url : `${url}.scss`;
    return tryResolve_(normalizedUrl, sourceFilename) ||
        tryResolve_(path.join(path.dirname(normalizedUrl), `_${path.basename(normalizedUrl)}`),
            sourceFilename);
}

function materialImporter(url, prev) {
    if (url.startsWith('@material')) {
        const resolved = tryResolveScss(url, prev);
        return {file: resolved || url};
    }
    return {file: url};
}

  2. 更改sass-loaderwebpack 配置文件中的配置，如下所示：

    {
    loader: 'sass-loader',
    options: {
        importer: materialImporter,
    },
}

  3. sass使用以下命令更新npm 包，它应该是"sass": "^1.26.3"：

    npm update sass

  4. ~从app.scss文件中删除。因为我们使用了我们的服装进口商功能，所以这个波浪号不能被我们的新进口商功能解决。然后直接导入_mixins.scss部分文件。所以我们有：

    @use "@material/ripple/mixins";

  5. 您应该直接从部分文件中导入它surface，而不是包含在内。我不知道为什么这个例子写成这样并从！因为文件不存在，因此表面也不存在。我阅读了sass 的@use 文档并了解当 sass 文件存在时可以使用 @use ，所以我认为像这个示例这样的导入不适用于像你的re-production这样的用例。ripple.surfacemixins@include ripple.surface;@use "@material/ripple";_ripple.scss

    @include mixins.mdc-ripple-surface;

  6. 最后，您的app.scss文件应如下所示：

    @use "@material/ripple/mixins";

.test {
  @include mixins.mdc-ripple-surface;
  @include mixins.mdc-ripple-radius-bounded;
}

最后，npm run build命令运行成功。

于 2020-03-20T03:14:13.540 回答
1

我正在以不同的心态和更少的步骤添加一个替代答案，以这种方式：

  1. 我只是更新sass并且sass-loader绝对material-components-web是最新版本。所以在本次更新结束时，您的package.json如下所示：

    {
  "private": true,
  "scripts": {
    "build": "webpack --config=webpack.config.js"
  },
  "devDependencies": {
    "autoprefixer": "^9.7.4",
    "css-loader": "^3.4.2",
    "extract-loader": "^5.0.1",
    "file-loader": "^6.0.0",
    "postcss-loader": "^3.0.0",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "material-components-web": "^5.1.0"
  }
}

  2. 然后在app.scss文件中使用 mixins，如下所示：

    @use "~@material/ripple/index";

.test {
  @include index.surface;
  @include index.radius-bounded;
  @include index.states;
}

然后通过npm run build命令你有一个成功的构建，事实上，你错过了匹配最新版本的sass，sass-loader和material-components-web，然后你使用了最新的文档，它们之间有一些冲突，这会导致你的错误。

，在第二个解决方案中，我看到了一件奇怪的事情，当我编写示例时，它看起来与给定的链接完全一样，@use '@material/button';并且解析器可以看到文件夹_index.scss内部。node_modules/@material/button但是当我切换到您的需要时，我的意思@use "@material/ripple";就像这个链接一样，解析器看不到文件夹_index.scss内部node_modules/@material/ripple，毫无疑问，它来自package.json波纹模块。因为在package.jsonofripple模块中有"main": "dist/mdc.ripple.js"并且"module": "index.js"我不知道作者为什么声明它，所以我们被迫@use "~@material/ripple/index";只使用这个声明。

我为这个奇怪的事情留下了一个问题。

于 2020-03-20T05:33:31.963 回答