角2：SCSS不會生產負荷與的WebPack

在生產中：

我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 
     }) 
    ] 
});

腳本中的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/" 
    }

在進口端的一個例子.ts文件中的樣式：

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

很明顯Ÿ我呼籲腳本編譯scss，之前...

有人看到錯誤或錯過了什麼嗎？感謝

更新：在發展工程，因爲手錶是積極的的WebPack運行（或類似的東西，因爲我可以在Chrome的開發者吧看看），如果我沒有它的CSS不會投放運行。

更新2：

我找到了一種方法，使其工作在生產，但它在發展中崩潰了：

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 
    ] 
};

來源

2017-06-01 Max Bertoli

解決：

只需導入SCSS文件，而不是使用「styleUrls 「進入組件。因此它在開發和生產中都有效。

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

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

備註：

1）在生產中我創建的CSS的束（見的WebPack配置）

2）因此，有必要捆綁導入到的意見，因爲我們做正常的css文件。

來源

2017-06-02 20:02:04

角2：SCSS不會生產負荷與的WebPack

回答

相關問題