Angular + Webpack + SCSS + Autoprefixer?

Question

Sass

My webpack.config.js

spoiler

const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); // плагин минимизации
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require('autoprefixer');

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'app': './src/main.ts'
  },
  mode: "development",
  // mode: "production",
  output:{
    path: path.resolve(__dirname, 'dist'),     // путь к каталогу выходных файлов - папка public
    publicPath: '/',
    // filename: '[name].[hash].js'
    filename: '[name].js'
  },
  devServer: {
    compress: true,
    port: 9000,
    watchContentBase: true,
    progress: true,
    historyApiFallback: true,
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module:{
    rules:[
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'awesome-typescript-loader',
            options: { configFileName: path.resolve(__dirname, 'tsconfig.json') }
          } ,
          'angular2-template-loader'
        ]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=assets/[name].[ext]'
      },
      {
        test: /\.(css|sass|scss)$/,
        exclude: path.resolve(__dirname, 'src/app'),
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                autoprefixer({
                  browsers:['ie >= 8', 'last 4 version']
                })
              ],
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader'
          },
          {
            loader: 'raw-loader'
          },
        ]
      },
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      /angular(\|\/)core/,
      path.resolve(__dirname, 'src'), // каталог с исходными файлами
      {} // карта маршрутов
    ),
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css"
    }),
    new UglifyJSPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.LoaderOptionsPlugin({
      htmlLoader: {
        minimize: false
      }
    })
  ]
};

Compiled from various sources.
The first SCSS problem
When I start the webpack server, it swears at the end

ERROR in ./src/app/app.component.scss 1:3
Module parse failed: Unexpected token (1:3)
You may need an appropriate loader to handle this file type.
> h1 {
|   background: red;
| }

As a result, the server does not start
And the second problem, but it is not critical, but annoying)

WARNING in ./node_modules/@angular/core/fesm5/core.js 18349:15-36
Critical dependency: the request of a dependency is an expression
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/main.ts

At the same time, the server starts up, but warns that there were errors
. Please tell me, what did I do wrong? What to fix?

Answer 1

you have it in the config exclude: path.resolve(__dirname, 'src/app'),- this means that for files of the type test: /\.(css|sass|scss)$/,in the specified folder this rule will not work for you.
In the error, we see the path just to the file that lies in the excluded folder:
change exclude to include, or completely remove it (depending on whether , are there other css|sass|scss files in use in other folders)