(Ich bin noch neu in Angular 5/Webpack, also entschuldige mich für Missverständnisse!) Wenn ich 'webpack-dev-server' starte, lädt es alle meine Styles mit Ausnahme meines globalen Stylesheets styles.scss enthält Code, der die Ränder und das Padding auf 0 setzt. Aber es kann alle anderen HTML- und CSS-Dateien laden und kann aktualisiert werden, wenn ich den Code ändere. Was komisch ist, wenn ich "ng serve" starte, gilt das globale Stylesheet gut und die Ränder und Abstände sind weg!Webpack-dev-server nicht globale Stile anwenden?
Von dem, was ich verstehe, transpilieren die Loader die scss ordnungsgemäß auf CSS, aber aus irgendeinem Grund wird die Bündelung durcheinander gebracht. Vielleicht mache ich etwas falsch damit, wie ich die Dateien zusammen füge? Ich habe ziemlich viel mit den Regeln in den Konfigurationsdateien herumgespielt, also habe ich vielleicht versehentlich mit den Interaktionen zwischen einigen Modulen geschraubt und das Bündeln zu einem Chaos gemacht.
Ich habe nach Leuten gesucht, die ähnliche Fehler hatten, weil sie nicht in der Lage waren, ihre globalen Stile einen ganzen Tag lang auf einem Dev-Server laufen zu lassen, aber ich denke, ich suche nach dem Falschen. Jede Hilfe wird geschätzt!
Unten sind meine Webpack-Konfigurationsdateien (webpack.common.js, webpack.dev.js - die eigentliche Datei webpack.config.js enthält nur einen Einzeiler, der besagt, dass sie webpack.dev.js benötigt), mein index.html Datei, meine package.json, und ein Bild von meinem Dateibaum.
webpack.common.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['.ts', '.js']
},
node: {
fs: 'empty'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}
],
rules: [
{
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: { configFileName: helpers.root('tsconfig.json') }
} , 'angular2-template-loader'
],
exclude: [/\.(spec|e2e)\.ts$/]
},
{
test: /\.html$/,
loader: 'raw-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.json$/,
use: 'json-loader'
}
]
},
plugins: [
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/\@angular(\\|\/)core(\\|\/)esm5/,
helpers.root('./src'), // location of your src
{} // a map of your routes
),
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new ExtractTextPlugin({
filename: 'style.css',
disable: false,
})
]
};
webpack.dev.js
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: helpers.root('dist'),
publicPath: '/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
plugins: [
new ExtractTextPlugin('[name].css')
],
devServer: {
historyApiFallback: true,
stats: 'minimal',
port: 3000
}
});
package.json
{
"name": "project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --config config/webpack.dev.js --progress --color --hot",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"webpack-dev-server": "webpack-dev-server",
"webpack": "webpack"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.0.1",
"@angular/common": "^5.0.1",
"@angular/compiler": "^5.0.1",
"@angular/core": "^5.0.1",
"@angular/forms": "^5.0.1",
"@angular/http": "^5.0.1",
"@angular/platform-browser": "^5.0.1",
"@angular/platform-browser-dynamic": "^5.0.1",
"@angular/router": "^5.0.1",
"core-js": "^2.5.1",
"es6-shim": "^0.35.3",
"lodash": "^4.17.4",
"rxjs": "^5.5.2",
"ts-loader": "^3.1.1",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "^1.5.0",
"@angular/compiler-cli": "^5.0.1",
"@angular/language-service": "^5.0.1",
"@types/core-js": "^0.9.43",
"@types/jasmine": "^2.5.54",
"@types/jasminewd2": "~2.0.2",
"@types/node": "^6.0.92",
"@types/webpack": "^3.8.1",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.3.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"codelyzer": "~3.2.0",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.2",
"style-loader": "^0.19.0",
"to-string-loader": "^1.1.5",
"ts-node": "^3.2.2",
"tslint": "~5.7.0",
"typescript": "~2.4.2",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4",
"webpack-merge": "^4.1.1"
}
}
Vielen Dank für Ihre Hilfe!