Angular 2: SCSS wird nicht geladen, in der Produktion mit webpack

Question

Im Modus entwickeln alles funktioniert gut:

In Produktion:

Mein webpack.config.common. js:

var webpack = require('webpack'); 

module.exports = { 
    entry: { 
     'app': './assets/app/main.ts' 
    }, 

    resolve: { 
     extensions: ['.js', '.ts'] 
    }, 

    module: { 
     rules: [ 
      { 
       test: /\.html$/, 
       use: [{ loader: 'html-loader' }] 
      }, 
      { 
       test: /\.css$/, 
       use: [{ loader: 'raw-loader' }] 
      }, 
      { 
       test: /\.scss$/, 
       exclude: /node_modules/, 
       loaders: ['raw-loader', 'sass-loader'] 
      } 
     ], 
     exprContextCritical: false 

    } 
}; 

webpack.con fig.dev.js:

var path = require('path'); 

var webpackMerge = require('webpack-merge'); 
var commonConfig = require('./webpack.config.common.js'); 

module.exports = webpackMerge(commonConfig, { 
    devtool: 'cheap-module-eval-source-map', 

    output: { 
     path: path.resolve(__dirname + '/public/js/app'), 
     publicPath: "/js/app/", 
     filename: 'bundle.js', 
     chunkFilename: '[id].chunk.js' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.ts$/, 
       use: [ 
        {loader: 'awesome-typescript-loader', options: { 
         transpileOnly: true 
        }}, 
        {loader: 'angular2-template-loader'}, 
        {loader: 'angular-router-loader'} 
       ] 
      } 
     ] 

    } 
}); 

webpack.config.prod.js:

var path = require('path'); 

var webpack = require('webpack'); 
var webpackMerge = require('webpack-merge'); 
var commonConfig = require('./webpack.config.common.js'); 

module.exports = webpackMerge.smart(commonConfig, { 
    entry: { 
     'app': './assets/app/main.aot.ts' 
    }, 

    output: { 
     path: path.resolve(__dirname + '/public/js/app'), 
     filename: 'bundle.js', 
     publicPath: '/js/app/', 
     chunkFilename: '[id].[hash].chunk.js' 
    }, 

    module: { 
     rules: [ 
      { 
       test: /\.ts$/, 
       use: [ 
        'awesome-typescript-loader', 
        'angular2-template-loader', 
        'angular-router-loader?aot=true' 
       ] 
      } 
     ] 
    }, 

    plugins: [ 
     new webpack.optimize.UglifyJsPlugin({ 
      sourceMap: false 
     }) 
    ] 
}); 

Die Skripte in der package.json:

"scripts": { 
    "start": "node ./bin/www", 
    "build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch", 
    "build:prod": "del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'", 
    "build:sass": "node-sass assets/app/ -o assets/app", 
    "watch:sass": "npm run build:sass && node-sass assets/app/ -wo assets/app/" 
    } 

Am Ende ein Beispiel des Import der Stile in .ts Datei:

styleUrls: ['./auth.component.scss','../common/common.scss'] 

Offensichtlich y Ich rief das Skript an, um scss zu kompilieren, bevor ...

Seht jemand etwas falsch oder fehlt? Dank

Update: In Entwicklung funktioniert, weil die Uhr aktiv ist und der webpack läuft (oder so etwas, weil ich in der Chrome-Entwickler-Bar sehen kann), wenn ich, ohne es zu CSS ausgeführt werden nicht bedient.

Update 2:

fand ich einen Weg, um es in der Produktion arbeitet zu machen, aber es stürzt in der Entwicklung:

var webpack = require('webpack'); 

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const extractSass = new ExtractTextPlugin({ 
    filename: "bundle.css", 
    disable: process.env.NODE_ENV === "development" 
}); 

module.exports = { 
    entry: { 
     'app': './assets/app/main.ts' 
    }, 

    resolve: { 
     extensions: ['.js', '.ts'] 
    }, 

    module: { 
     rules: [ 
      { 
       test: /\.html$/, 
       use: [{ loader: 'html-loader' }] 
      }, 
      { 
       test: /\.css$/, 
       use: [{ loader: 'raw-loader' }] 
      }, 
      { 
       test: /\.scss$/, 
       use: extractSass.extract({ 
        use: [{ 
         loader: "css-loader" 
        }, { 
         loader: "sass-loader" 
        }], 
        fallback: "style-loader" 
       }) 
      }], 
     exprContextCritical: false 
    }, 
    plugins: [ 
     extractSass 
    ] 
}; 

Answer 1

GELÖST:

Nur SCSS Dateien importieren statt Verwendung „styleUrls "in die Komponente. So funktioniert es sowohl in der Entwicklung als auch in der Produktion.

import './auth.component.scss'; 
import '../common/common.scss'; 

@Component({ 
    selector: 'tep-auth', 
    templateUrl: './auth.component.html' 
    providers: [] 
}) 

Bemerkungen:

1) In der Produktion hat ich ein Bündel von Css (Webpack Config)

2) Es ist notwendig, das Bündel in die Ansichten sehen zu importieren, wie wir mit normaler CSS-Datei zu tun .