각도 패키지의 웹팩으로 scss 컴파일

Question

각도 응용 프로그램에 webpack 3을 사용하고 있습니다. 내 scss 파일을 컴파일하는 데 몇 가지 문제가 있습니다. 웹팩이 오류를 구축하지 후 https://github.com/webpack-contrib/sass-loader

:

ERROR in ./assets/sass/main.scss 
Module parse failed: /home/git/project/src/public/src/assets/sass/main.scss Unexpected token (1:13) 
You may need an appropriate loader to handle this file type. 
| $header-color: #ffffff; 
| $admin-panel-height: 40px; 
| 
@ ./index.js 3:0-34 

이 또한 내가이 로더를 사용하려 : 난이 오류가있어

const path = require('path') 
const autoprefixer = require('autoprefixer') 
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin') 
const UglifyJSPlugin = require('uglifyjs-webpack-plugin') 
const ExtractTextPlugin = require('extract-text-webpack-plugin') 

const config = { 
    context: __dirname + '/src', 
    entry: { 
    app: './index.js', 
    vendor: [ 
     'angular', 
     'angular-animate', 
     'angular-bootstrap', 
     'angular-route', 
     'animate', 
     'bootstrap', 
     'bootstrap-filestyle', 
     'jquery', 
     'ng-file-upload', 
     'ng-parallax' 
    ] 
    }, 
    output: { 
    filename: 'bundle.js', 
    path: path.join(__dirname, 'app'), 
    publicPath: path.join(__dirname, 'app') 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx', '.scss'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style-loader', 
      'css?minimize!postcss!sass') 
     }, 
     { 
     test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/, 
     loader: 'file?name=fonts/[name].[ext]' 
     }, 
     { 
     test: /\.(jpg|jpeg|gif|png|svg)$/, 
     loader: 'file?name=images/[name].[ext]' 
     } 
    ], 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /(node_modules|bower_components)/, 
     use: { 
      loader: 'babel-loader', 
      options: { 
      presets: ['env'] 
      } 
     } 
     }, 
     { 
     test: /\.svg$/, 
     loader: 'url-loader' 
     }, 
     { 
     test: /\.php$/, 
     loader: 'file-loader?name=[name].[ext]' 
     }, 
     { 
     test: /\.zip$/, 
     loader: 'file-loader?name=[name].[ext]' 
     }, 
     { 
     test: /(\.png|\.jpg|\.gif)$/, 
     loader: 'file-loader?name=[path][name].[ext]' 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('./bundle.css'), 
    new CommonsChunkPlugin({ 
     name: 'vendor', 
     filename: 'vendor.bundle.js' 
    }), 
    new UglifyJSPlugin({}) 
    // new ExtractTextPlugin({ 
    // filename: '[name].min.css' 
    // }) 
    ] 
} 

module.exports = config 

웹팩를 실행 한 후 : 여기에 전체 웹팩 설정 파일입니다 등장했지만 css 파일도/app 폴더에 생성되지 않았습니다. 하는 index.js에서

파일 main.scss 수입 :

import './assets/sass/main.scss' 

사람이 나에게 내가 구축하고 웹팩 3하는 SCS 파일을 볼 수있는 방법에 대해 조언을 줄 수 있습니까?

Answer 1

webpack 1 인 로더 구성 중 일부를 사용했습니다.

하는 설정의 섹션

당신이 웹팩 2로 이동 깨는 변화가 있습니다

loaders: [ 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style-loader', 
      'css?minimize!postcss!sass') 
     }, 
     { 
     test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/, 
     loader: 'file?name=fonts/[name].[ext]' 
     }, 
     { 
     test: /\.(jpg|jpeg|gif|png|svg)$/, 
     loader: 'file?name=images/[name].[ext]' 
     } 
    ], 

(또는 3). 그들 중 하나는 module.loaders => module.rules입니다. 해당 섹션을 새 구조로 변환해야합니다.

또한 ExtractTextPlugin도 구성 스타일을 변경합니다 (please read it README).