webpack을 통해 material-components-web.css를 추가하십시오.

Question

miterial-components-web.css를 index.html 파일 헤더에 추가했습니다.

<script src="node_modules/material-components-web/dist/material-components-web.js"></script> 
<script src="dist/bundle.js"></script> 

CSS 구성 요소가 훌륭하게 작동합니다. 이제 webpack을 통해 몇 가지 javscript 구성 요소를 추가했습니다. 이제는 모든 webpack을 내 번들에 추가 할 수있게되었습니다 .js.

import 'material-components-web/dist/material-components-web.js'; 

오류는 발생시키지 않았지만 스타일을로드하지 않았습니다. 문제가 뭐야?

안부

내 webpack 구성에 대해.

const path = require('path'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: './src/app.js', 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: ['css-loader', 'sass-loader'] 
     }) 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('style.css') 
    ], 
    devServer: { 
    contentBase: "./build" 
    } 
}; 

Answer 1

webpack 구성을 보지 않고도 정확한 원인을 파악하기 어렵습니다.

그래도 CSS에는 webpack docs에서 제안한 것처럼 2 개의 로더가 필요합니다. 로더가 제자리에 있지 않다는 것을 짐작할 수 있습니다.

하나는 당신이 this 간단한 코드를 스캔 주시기 시도하고있는 무슨에 here

하지 근처 비록 설명이 너무 인라인 가져 오기를 사용할 수 있습니다. 기본적으로 webpack을 통해 번들로 제공되는 부트 스트랩 CSS가 있습니다. 그러나 비록 require()을 사용했지만 import을 사용하지 않았습니다. webpack config에 추가 된 적절한 js 프리 컴파일러로 전환하는 것이 어렵지 않아야합니다.