안녕하세요 김당퀔🥕입니다!
webpack 강의를 듣던 중 js를 통해서 css를 연결하는 방식으로 진행하였는데 자꾸 console 창에 오류가 뜨게 됩니다.
Refused to apply style from 'http://localhost:8080/scss/main.scss' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
뜻을 대충... 해석하자면, '링크' css를 적용할 수 없는데? 우리가 지원하는 게 아니야. 라는 뜻을 가지고 있는 오류입니다.
npm을 통해서 webpack을 설치하였고, package.json 과 webpack.config.js에 설정된 값들을 모두 적어 보자면 아래와 같습니다.
npm을 통해서 설치한 것들
$ npm i -D webpack
$ npm i -D webpack-cli webpack-dev-server@next // 버전을 맞춰 주기 위함
$ npm i -D html-webpack-plugin
$ npm i -D copy-webpack-plugin
$ npm i -D css-loader
$ npm i -D style-loader
$ npm i -D sass-loader sasspackage.json 설정값
"script": {
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
}webpack.config.js 설정값
// import
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
// export
module.exports = {
// 파일을 읽어들이기 시작하는 진입점 설정
entry: './js/main.js',
//결과물(번들)을 반환하는 설정
output: {
// path: path.resolve(__dirname, 'dist'),
// filename: 'main.js',
clean: true
},
module: {
rules: [
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new HtmlPlugin({
template: './index.html'
}),
new CopyPlugin({
patterns: [
{ from: 'static' }
]
})
],
// devServer: {
// host: 'localhost'
// }
}html에 연결된 js 파일에 설정된 링크
import '../scss/main.scss'index.html에 <head> 태그에 연결된 링크
<link rel="stylesheet" href="../scss/main.scss">여기서 오류가 난 이유를 추측해 보자면, webpack.config.js를 확인해 보면 저는 entry 파일이 main.js입니다. 그렇기 때문에 index.html에 연결된 css 파일의 위치를 읽어들일 수가 없는 거죠.
그래서 main.js에 연결된 css로 동작을 하는 것이고, html에서는 link 태그로 연결된 css 파일이 필요가 없게 됩니다.
해결 방법! html에 연결된 css를 삭제해 주면 된다.
간단한 해결 방법이기도 하고, 혹여나 같은 오류를 마주쳤을 때 오류의 방향성이라도 알기 위해 글을 써 보았습니다. webpack이 아직 익숙하지 않아서 webpack을 사용할 때 쓰는 설정값들도 추가로 적어 두었으니 확인해 주세요!
