Uncaught Error: Expected 'styles' to be an array of strings - css

Question

I have tried solutions proposed for this identical error message without success. When i run my angular project with the angular cli through ng serve, the project runs fine without errors. However, when i compile it with webpack, i get the (full) error message:
Uncaught Error: Expected 'styles' to be an array of strings.
at z (vendor.js:1)
at t.getNonNormalizedDirectiveMetadata (vendor.js:1)
at t.loadDirectiveMetadata (vendor.js:1)
at vendor.js:1
at Array.forEach (<anonymous>)
at vendor.js:1
at Array.forEach (<anonymous>)
at t._loadModules (vendor.js:1)
at t._compileModuleAndComponents (vendor.js:1)
at t.compileModuleAsync (vendor.js:1)
at e._bootstrapModuleWithZone (vendor.js:1)
at e.bootstrapModule (vendor.js:1)
at Object.<anonymous> (app.js:1)
at Object.199 (app.js:1)
at e (vendor.js:1)
at window.webpackJsonp (vendor.js:1)
at app.js:1
My webpack.config.js:
// Plugins
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// Config
module.exports = {
entry: {
app: "./src/main.ts",
vendor: ["./src/vendor.ts", "./src/polyfills.ts"]
},
output: {
publicPath: "",
path: __dirname + "/dist/",
filename: "[name].js"
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loaders: [
{
loader: "awesome-typescript-loader",
options: { tsconfig: "tsconfig.json" }
}, "angular2-template-loader"
]
},
{
test: /\.(html)$/,
loaders: [
{
loader: "html-loader"
}
]
},
{
test: /\.(css|scss)$/,
loaders: ['to-string-loader', 'css-loader', 'sass-loader']
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
comments: false
}),
new webpack.optimize.CommonsChunkPlugin({
names: ["app", "vendor"]
}),
new HtmlWebpackPlugin({
template: "src/index.tpl.html",
inject: "body",
filename: "index.html"
})
]
}
.angular-cli.json
{
"apps": [
{
"root": "src",
"outDir": "dist",
"index": "index.tpl.html",
"main": "main.ts",
"polyfills": "polyfills.ts"
}
],
"defaults": {
"styleExt": "css"
}
}
app-root / app.component.ts
import { Component } from "#angular/core";
import { Observable } from "rxjs/Rx";
import { NgFor } from "#angular/common";
#Component ({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
}
Any suggestions as to what i am doing wrong?

Answer 1

This was my webpack setup that worked for scss and css files. For this setup (using Angular Storybook, so this webpack config was located in ./storybook), I had a global stylesheet in app/styles that needed some extra massaging because it imported other stylesheets in that directory that used relative paths. I also had a custom stylesheet in the same directory as this webpack (./):
webpack.config.js
const path = require('path');
const autoprefixer = require('autoprefixer');
const postCSSCustomProperties = require('postcss-custom-properties');
const postcssPlugins = () => [
require('postcss-flexbugs-fixes'),
autoprefixer({ flexbox: 'no-2009' }),
postCSSCustomProperties({ warnings: true })
];
module.exports = (baseConfig, env, config) => {
baseConfig.module.rules = [
...baseConfig.module.rules.filter(r => !r.test.toString().includes(".s(c|a)ss")), // base rules supplied by Angular Storybook
...
{
test: /\.css$/,
use: [
'raw-loader',
{
loader: 'postcss-loader',
options: {
plugins: postcssPlugins
}
}
]
},
{ // component scss loader
test: /\.scss$/,
include: [path.resolve(__dirname, '../')],
exclude: [path.resolve(__dirname, '../app/styles'), path.resolve(__dirname, './')],
use: [
'raw-loader',
{
loader: 'postcss-loader',
options: {
plugins: postcssPlugins
}
},
'sass-loader'
]
},
{ // global and storybook scss loader
test: /\.scss$/,
include: [path.resolve(__dirname, '../app/styles'), path.resolve(__dirname, './')],
loaders: [
'style-loader',
'css-loader',
'resolve-url-loader', // resolves relative imports
'sass-loader?sourceMap' // sourcemap = true to assist resolve-url-loader
]
},
...
];
baseConfig.resolve.extensions.push(".css", ".scss");
baseConfig.resolve.alias = {
...baseConfig.resolve.alias,
"assets": path.resolve(__dirname, "../app/assets") // needed to resolve relative paths in imported scss using an alias, where the imported files referred to sheets like "url(~assets/path/to/pic.jpg)"
}
return baseConfig;
};
package.json
"dependencies": {
"#angular/core": "^6.1.3",
"resolve-url-loader": "^3.0.0",
},
"devDependencies": {
"#ngtools/webpack": "6.0.8",
"#storybook/angular": "^4.1.4",
"css-loader": "^0.28.11",
"postcss-custom-properties": "^7.0.0",
"postcss-flexbugs-fixes": "^3.3.1",
"postcss-loader": "^2.1.5",
"raw-loader": "^0.5.1",
"sass-loader": "^7.0.3",
"style-loader": "^0.23.1",
"webpack": "4.15.0"
}

Answer 2

I solved my issue, by following Shobhit's suggestion, adding the following to webpack.config.json:
...
rules: [
{
test: /\.(scss|css)$/,
use: ["raw-loader", "sass-loader"]
},
{
test: /\.scss$/,
exclude: [/node_modules/, /src\/app/],
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"]
})
}
...
And
plugins: [
new ExtractTextPlugin("styles.css")
...