Webpack-dev-server not applying global styles? - css

Question

(I'm still new to Angular 5 / Webpack, so I apologize for any misunderstandings!) When I run 'webpack-dev-server', it loads all my styles except for my global style sheet, styles.scss, which contains code that resets the margins and padding to 0. But it's able to load all the other html and css, and can update as I change the code. What's weird though is when I run 'ng serve', the global style sheet applies just fine and the margins and padding are gone!
From what I understand, the loaders are transpiling the scss down to css properly, but for some reason the bundling is getting messed up. Perhaps I'm doing something wrong with how I bundle the files together?? I've messed around with the rules in the config files quite a bit, so I might have accidentally screwed with the interactions between some modules and made the bundling a mess.
I've looked for people who've had similar errors with not being able to get their global styles working on a dev server about a whole day now, but I think I might be looking for the wrong thing. Any help is appreciated!
Below is my webpack config files (webpack.common.js, webpack.dev.js -- the actual webpack.config.js file only contains a one-liner that says it requires webpack.dev.js), my index.html file, my package.json, and a picture of my file tree.
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"
}
}
file tree
Thank you very much for your help!

Answer 1

Aha! It seems that the issue was I was both using #import in my global stylesheet to include other styles and also using styleUrls in my components. I got rid of styleUrls, kept the #imports in my global stylesheet :)