scss파일을 js파일에 연결하는 방법
test: /\.s?css$/
로 수정하면 .scss로 끝나는 확장자를 찾는데 s는 있을 수도 없을 수도 있다, 라는 뜻이다. module: {
rules: [
{ // .scss로 끝나는 확장자를 찾는데 s는 있을 수도 없을 수도 있다.
test: /\.s?css$/,
use: [
// 아래 해석된 내용을 html파일에 삽입해줌
'style-loader',
// js파일에서 css파일을 해석할 수 있게 도와줌
'css-loader'
]
}
]
},
npm i -D sass-loader sass
패키지 설치
sass-loader 패키지가 webpack에서 해당하는 SCSS파일을 읽어낼 수 있게 하고 그 문법을 해석해줄 수 있는 실제 sass 모듈을 사용해야한다. 그래서 sass-loader, sass 두개의 패키지를 설치한다.
webpack.config.js파일 설정
module: {
rules: [
{ // .scss로 끝나는 확장자를 찾는데 s는 있을 수도 없을 수도 있다.
test: /\.s?css$/,
use: [
// 아래 해석된 내용을 html파일에 삽입해줌
'style-loader',
// js파일에서 css파일을 해석할 수 있게 도와줌
'css-loader',
// css-loader보다 sass-loader가 먼저 실행되어야 한다.
'sass-loader'
]
}
]
},
$color--black: #000;
$color--white: #fff;
body {
background-color: $color--black;
}
h1 {
color: $color--white;
font-size: 40px;
}
npm run dev
개발서버 열어서 확인