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就可以了！

Webpack材料组件

2 个答案: