안경잡이개발자

728x90
반응형

1. Style 적용을 위한 라이브러리 추가하기


  yarn add style-loader

  yarn add css-loader


2. 웹팩(Webpack) conf 파일 수정하기


'use strict'
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
entry: {
main: ['./src/main.js']
},
output: {
path: path.resolve(__dirname, './build'),
filename: '[name].js'
},
module: {
rules: [{
test: /\.js$/,
include: path.resolve(__dirname, './src'),
loaders: 'babel-loader'
}, {
test: /\.css$/,
loader: "style-loader!css-loader"
}]
},
plugins: [
new CopyWebpackPlugin([{
context: './public',
from: '*.*'
}]),
],
devServer: {
contentBase: './public',
host: 'localhost',
port: 8080
}
}


▶ ./src/index.css


@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

div {
font-family: 'Noto Sans KR' !important;
}


▶ ./src/main.js


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
typography: {
useNextVariants: true,
fontFamily: '"Noto Sans KR"'
}
});

ReactDOM.render(<MuiThemeProvider theme={theme}><App /></MuiThemeProvider>, document.getElementById('app'));


  이후에 모든 컴포넌트 JS 파일에 import '../index.css';를 넣어주시면 됩니다.


※ 실행 결과 ※



728x90
반응형