INTRO
Webpack에서 style code loader 세팅에 대하여...
1. install package
yarn add -D style-loader css-loader
2. Add line Webpack Config
// webpack.config.js
...
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
use: ["babel-loader"],
}
+ ,
+ {
+ test: /\.(css|scss)$/i,
+ use: ["style-loader", "css-loader"],
+ },
],
},
...3. Source
본시리즈 public/index.html body태그 안에 랜더링용 div tag id root의 속성을 정의 해본다.
...
<body>
<div id="root"></div>
</body>
...3-1. create @/styles/main.css
#root{
background-color: red ;
}3-2. modify @/index.js
- import main.scss
// @/index.js
...
import "@/main.scss"
...4. Execution
배경이 씨뻘개지면 성공
5. Last
본 문서는 tailwind 세팅을 위한 사전 작업으로 보면되며 다음 문서에서 tailwind에 대해 논한다.
6. Source
https://bitbucket.org/code7004/react-webpack/src/271d1eb1081ce47e5e1b25f1dc3247c6e5bf5193/
ENFJ