Webpack材料组件

Question

当我试图在我的主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);
}

我能做些什么来解决这个错误，我刚开始使用材料组件，找不到任何关于这个问题的解决方案。

Answer 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中的注释

Answer 2

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