以下配置是手工完成的，以支持标题中给出的所有技术(webpack、typescript、phaser 和 angular)。
它非常适用于 Angular 组件样式表。但看起来不可能包含全局样式表。下面是相关的配置文件:
HTML 文件:
<!-- src/index.html -->
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<!-- it's included here! -->
<link rel="stylesheet" href="styles/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>
CSS 文件:
/*
src/styles/main.css
This file is correctly loaded in dev environment. When I build the project it disapear. :(
*/
body {
background: #253050 url('../assets/design/main_background.jpg') no-repeat center;
}
和webpack配置:
// config/webpack.common.js
'use strict';
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
var helpers = require('./helpers');
var distDir = path.resolve(__dirname, '../dist');
// Phaser webpack config
const phaserModule = path.join(__dirname, '/../node_modules/phaser-ce/');
const phaser = path.join(phaserModule, 'build/custom/phaser-split.js');
const pixi = path.join(phaserModule, 'build/custom/pixi.js');
const p2 = path.join(phaserModule, 'build/custom/p2.js');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
"app": "./src/main.ts"
},
// What files webpack will manage
resolve: {
extensions: ['.js', '.ts', '.tsx'],
alias: {
'phaser': phaser,
'pixi': pixi,
'p2': p2
}
},
output: {
path: distDir,
filename: '[name]_bundle.js'
},
module: {
rules: [
{ test: /assets(\/|\\)/, use: [ 'file-loader' ] },
{
test: /\.tsx?$/,
// ts-loader loads typescript files
// angular2-template-loader is needed to load component templates
loaders: ['ts-loader', 'angular2-template-loader'],
exclude: [
/.+phaser-ce\/typescript\/.+\.ts$/,
/typescript\/.+\.d\.ts$/
]
},
{
test: /\.html$/,
loader: 'html-loader'
},
// to-string-loader is for css loaded by angular components
// .... and loading angular css work as expected.
{ test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
{
test: /\.scss$/, // I'd like so much sass work but guess what... it doesn't!
use: ['to-string-loader', 'css-loader', 'sass-loader']
},
// Because phaser and its dependencies are not made for TypeScript and webpack
{ test: /pixi\.js/, use: [{loader: 'expose-loader', options: 'PIXI'}] },
{ test: /phaser-split\.js$/, use: [{loader: 'expose-loader', options: 'Phaser'}] },
{ test: /p2\.js/, use: [{loader: 'expose-loader', options: 'p2'}] }
]
},
plugins: [
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
// For Angular 5, see also https://github.com/angular/angular/issues/20357#issuecomment-343683491
/\@angular(\\|\/)core(\\|\/)esm5/,
helpers.root('src'), // location of your src
{
// your Angular Async Route paths relative to this root directory
}
),
new CleanWebpackPlugin([distDir]),
new HtmlWebpackPlugin({
template: 'src/index.html',
chunksSortMode: function(a, b) {
// set the load order !
var order = ["polyfills", "app"];
return order.indexOf(a.names[0]) - order.indexOf(b.names[0]);
}
})
]
};
这是 webpack.prod.js 配置:
module.exports = merge(common, {
devtool: 'source-map',
plugins: [
// stops the build if there is an error
new webpack.NoEmitOnErrorsPlugin(),
new UglifyJSPlugin({sourceMap: true}),
// extracts embedded css as external files, adding cache-busting hash to the filename
new ExtractTextPlugin('[name].[hash].css'),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
});
当我运行 webpack --config config/webpack.prod.js 时，全局 CSS 没有加载，没有错误。只是没有 CSS。
请随意解释如何加载 SCSS，因为它对我来说即使在开发模式下也不起作用。
谢谢!
最佳答案
我终于成功了。所以这是我所做的更改:
1) 现在在 css/scss 子句中忽略 style.css 的路径。
{
exclude: path.resolve(__dirname, '../src/styles'),
test: /\.css$/, loaders: ['to-string-loader', 'css-loader']
},
{
exclude: path.resolve(__dirname, '../src/styles'),
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', 'sass-loader']
}
2) 我为 CSS 添加了一个新的入口文件
entry: {
'polyfills': './src/polyfills.ts',
'app': './src/main.ts',
'css': './src/styles/main.css'
}
3) 它有效，因为我还配置了一个使用 ExtractTextPlugin 的新规则
{
test: /\.css$/,
exclude: path.resolve(__dirname, '../src/app'),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
请注意，这也有效，因为产品配置将 new ExtractTextPlugin('[name].[hash].css') 指定为插件。 (这意味着你需要在通用配置中添加它，以避免在开发环境中出现任何错误)
关于css - 如何使用 webpack、typescript、phaser 和 angular 配置全局 css 和 sass 样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49512760/