やりたいこと
Vue の単一ファイルコンポーネントで Google 公式の Material Desing Components for the Web を使用したいと考えています。
そのために、@import で /node_modules/配下を参照できるようにしたい。
ほかにも Material 系はありますが、アニメーションに多少違和感があったり、なるべく公式のものを使いたい。
現状
https://github.com/fm311g/test/
Vue CLI の pwa で生成されたプロジェクトファイルを使用しています。
https://material.io/develop/web/docs/getting-started/ の「Using MDC Web with ES2015 and Sass」とhttps://github.com/material-components/material-components-web の「Include CSS for a component」を参考にしています。
手順通りに Webpack Config を書き換えたいのですが、解説に使われている Webpack の Config ファイルは「webpack.config.js」となっていますが、Vue CLI で作成したプロジェクトファイルには Webpack Config らしきファイルが 4 つあります。
Webpack は少しずつ読めるようにはなってきていますが、初心者です。どこをどのように書き換えればいいか教えてください。
Vue Components に次のように書くと、
Test.vue
1<style lang="scss" scoped> 2 @import '@material/checkbox'; 3</style>
Can not resolve directory '@material' とエラーが表示され、Webpack Config が正しく設定されていないため、/node_modules/ にある @material を参照できていないようです。
https://libraries.io/github/YuoMamoru/material-components-web
注意: コンポーネントの Sass ファイルは @material スコープのフォルダを含む node_modules ディレクトリが Sass の参照パスにあることを想定しています。
知りたいこと
Vue のコンポーネント内<style>
で@import
するとき、/node_modules/
の下にある SCSS ファイルを使用できるように Webpack を設定する方法を知りたい。
参考にしているURL
https://qiita.com/zzzzz/items/b92d28010922a02e9d6d
https://libraries.io/github/YuoMamoru/material-components-web
環境など
Windows 10
Webstorm
Vue, pwa
あなたの回答
tips
プレビュー