在开发模式下,一切正常:
在生产中:
我的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.config.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']
显然,在...之前,我调用了脚本来编译Scs。
有人看到错误或遗漏的东西吗? 谢谢
更新:在开发中,因为手表处于活动状态并且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
]
};
解决了:
只需导入SCSS文件,而不是在组件中使用“ styleUrls”即可。 因此,它在开发和生产中均有效。
import './auth.component.scss';
import '../common/common.scss';
@Component({
selector: 'tep-auth',
templateUrl: './auth.component.html'
providers: []
})
备注:
1)在生产中,我创建了一个CSS捆绑包(请参阅Webpack配置)
2)必须像正常的css文件一样,将捆绑软件导入视图。