Webpack 材质组件答案

【问题标题】：Webpack Material componentsWebpack 材质组件
【发布时间】：2018-04-13 09:13:54
【问题描述】：

尝试在我的主 scss 文件中导入材质组件时，我从 webpack 收到以下错误

Time: 426ms
                            Asset     Size  Chunks             Chunk Names
    ./public/dist/style-bundle.js  2.77 kB       0  [emitted]  main
       [0] ./public/scss/app.scss 292 bytes {0} [built] [failed] [1 error]

    ERROR in ./public/scss/app.scss
    Module build failed:
    @import "@material/button/mdc-button";
    ^
          File to import not found or unreadable: @material/button/mdc-button.
          in /home/r2d2/Desktop/Practice/Insta/node_modules/material-components-web/material-components-web.scss (line 17, column 1)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! instagram@1.0.0 web: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the instagram@1.0.0 web script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/r2d2/.npm/_logs/2018-04-13T09_05_24_696Z-debug.log

主要问题似乎是按钮组件。这是名为 app.scss 的主 scss 文件

@import "../../node_modules/material-components-web/material-components-web";

.foo-button {
  @include mdc-button-ink-color(teal);
  @include mdc-states(teal);
}

我该如何解决这个错误，我刚开始使用材料组件，找不到任何解决方案。

【问题讨论】：

标签： webpack material-components-web

【解决方案1】：

你可以尝试使用~

@import "~material-components-web/material-components-web/filename.scss";

或者您可以在导入时使用别名

resolve: {
    extensions: ['', '.js', '.css', '.scss'],
    alias: {
        material: path.join(__dirname, '/node_modules/material-components-web/material-components-web/filename.scss')
    }
}
@import '~material',

查看webpack community中的评论

【讨论】：

【解决方案2】：

所以我想通了。无需提供通过 node_modules 文件夹的完整路径。只需导入 material-components-web 就可以了！

【讨论】：