I've encountered an issue with my CSS while attempting to transition to a hybrid AngularJS/Angular application using angular-cli.
ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!../node_modules/sass-loader/dist/cjs.js??ref--15-3!./src/styles.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(2:4) Unknown word
1 | //
> 2 | // Copyright 2017 Google Inc.
| ^
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
In the past, I relied on webpack to manage my CSS/SCSS:
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
includePaths: ['./css', './node_modules']
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: () => [
postcssCustomProperties({
importFrom: ['./css/variables.css']
})
]
}
}
]
}
It appears that angular-cli's webpack build processes CSS differently from how my old AngularJS project did. I want to maintain a separation between my AngularJS project and the new Angular project. How can I incorporate all the existing CSS from my AngularJS project into the new setup?