Here's a solution using the ngx-build-plus pkg. (ng version: 9.1.6 )
- add
ngx-build-plusto your angular project:
ng new myapp --style=scss --routing
cd myapp
ng add ngx-build-plus
- create a
webpack.partial.jsfile in root of the project directory, and put the following in it:
const rtlcss = require('rtlcss');
const autoprefixer = require('autoprefixer');
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
{
loader: 'postcss-loader',
options: {
postcssOptions: {plugins: [autoprefixer, rtlcss]}
}
},
'sass-loader',
],
},
],
},
};- install required packages:
npm i postcss postcss-loader rtlcss autoprefixer -D - run
ng serve --extra-webpack-config webpack.partial.js -o
Done.
Now all of your *.scss files will go through rtlcss and autoprefixer.
yes, because angular uses webpack internally
but if you initialized your project with
ngcli then it installs and sets everything up for youso you don't (usually) deal with installing webpack manually
but I don't know the state of your project or the sequence of events up till this point
(maybe your
node_modulesfolder got modified as a result of some other things)but for reference, I just re-tested the steps of this solution with
ngcli version15.2.4and everything works as expectedhere's some things you can try
run
npm iin your projectmake a new blank project with your current
ngcli (v13.x.x) and try the steps again and see if you get the same errorinstall latest
ngcli (15.2.4) and make a new blank project and try the steps again