Webpack sass-loader 잘못된 CSS

Question

빌드를 실행할 때마다이 오류가 발생합니다.

Invalid CSS after "module.exports": expected "{", was '= "data:text/x-scss' 

바닐라 JS 웹팩 설정을 사용해 보았는데 동일한 오류가 발생하여 TypeScript 설정이 아닙니다. 또한 extract-text-webpack-plugin을 시도했지만 동일한 오류가 발생합니다. 실제 앱은 정상적으로 작동하지만 분명히 CSS가 없습니다. 다음은 설정입니다.

import * as path from 'path'; 
import * as webpack from 'webpack' 

const config: webpack.Configuration = { 
    entry: { 
     app: ['./js/main.ts'] 
    }, 
    output: { 
     path: path.resolve(__dirname, './dist/js'), 
     filename: '[name].js' 
    }, 
    module: { 
     rules:[ 
      { 
       test: /\.html$/, 
       loader: 'ngtemplate-loader?prefix=/&module=app&relativeTo=' + (path.resolve(__dirname, './js/app')) + '/!html-loader' 
      }, 
      { 
       test: /\.ts$/, 
       loader: 'awesome-typescript-loader' 
      }, 
      { 
       test: /\.(sass|scss|ttf|svg|woff)$/, 
       use: [{ 
        loader: "style-loader" 
       }, { 
        loader: "css-loader" 
       }, { 
        loader: "sass-loader", 
       }, { 
        loader: "url-loader" 
       }] 
      } 
     ] 
    } 
} 

export default config 

다음은 기본 sass 파일의 스 니펫입니다. 와 주요 응용 프로그램 파일에서 가져

@import "utilities/variables"; 
@import "utilities/animations"; 
@import "utilities/helpers"; 

:

import '../sass/sass.scss'; 

Answer 1

나는 어떻게 든 url-loader에 대한 Sass 파일을 사용하기 때문에 오류라고 생각합니다. (sass|scss|ttf|svg|woff)에 대한 webpack.config 규칙을 다음과 같이 분할하십시오.

{ 
    test: /\.(ttf|svg|woff)$/, 
    use: [{ 
    loader: "url-loader" 
    }] 
}, 
{ 
    test: /\.(sass|scss)$/, 
    use: [{ 
    loader: "style-loader" 
    }, { 
    loader: "css-loader" 
    }, { 
    loader: "sass-loader", 
    }] 
}