Angular + Webpack + SCSS + Autoprefixer?

Question

[Magtir]

Мой 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
      }
    })
  ]
};

С разных источников составлен.
Первая проблема SCSS
Когда запускаю сервер webpack он в конце ругается

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;
| }

В итоге сервер не запускается

И вторая проблема, но она не критичная, но раздражает)

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

При этом сервер запускается, но предупреждает, что были ошибки
Подскажите пожалуйста, чего я не так сделал? Чего исправить?

Comments

[Magtir]

В общем методами тыка у меня получилось устранить почти все ошибки и баги.
Все собирается в один js, глобальные стили работают, все хорошо кроме руганий вебпака на core.js
Но главное, что не мешает, все робит

Пример моего файла, может кому пригодится

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  entry: {
    'main': [
      './src/styles.scss',
      './src/polyfills.ts',
      './src/main.ts',
    ]
  },
  mode: "development",
  // mode: "production",
  output: {
    path: path.resolve(__dirname, 'dist'),     // путь к каталогу выходных файлов - папка dist
    publicPath: '/WWW/static/dist',
    // filename: '[name].[hash].js'
    filename: '[name].js'
  },
  devServer: {
    compress: true,
    port: 9000,
    watchContentBase: true,
    progress: true,
    historyApiFallback: true,
  },
  resolve: {
    extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
  },
  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)$/,
        use: [
          {loader: 'to-string-loader'},
          {loader: 'style-loader'},
          {loader: 'css-loader'},
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                autoprefixer({
                  browsers: ['ie >= 8', 'last 4 version']
                })
              ],
              sourceMap: true
            }
          },
          {loader: 'sass-loader'}
        ]
      }
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      /angular(\|\/)core/,
      path.resolve(__dirname, 'src'), // каталог с исходными файлами
      {} // карта маршрутов
    ),
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.LoaderOptionsPlugin({
      htmlLoader: {
        minimize: false
      }
    }),
  ]
};

Answer 1

[Иван]

у тебя в конфиге стоит exclude: path.resolve(__dirname, 'src/app'), - это означает что для файлов типа test: /\.(css|sass|scss)$/, в указанной папке у тебя не будет срабатывать данное правило

В ошибке мы видим путь как раз к файлу, который лежит в исключенной папке:
ERROR in ./src/app/app.component.scss 1:3

поменяй exclude на include, либо совсем убери (зависит от того, есть ли еще в других папках используемые файлы css|sass|scss)

Comments

[Magtir]

Огромное спасибо) Поковырялся, блок для стилей стал такой

{
        test: /\.(css|sass|scss)$/,
        exclude: path.resolve(__dirname, 'src/app'),
        use: [
          {
            loader: 'css-loader',
            options: {
              minimize: true,
              sourceMap: true
            }
          },
        ]
      },
      {
        test: /\.(css|sass|scss)$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                autoprefixer({
                  browsers: ['ie >= 8', 'last 4 version']
                })
              ],
              sourceMap: true
            }
          },
          {loader: 'sass-loader'}
        ]
      }

Собирает как надо, стили работают. Префиксы работают. Еще raw пришлось убрать, с ним не запускался сервер.
НО за исключением глобального style.scss, который вроде как глобальный для всего в ангуляре. От него стили не подключаются
Этого не подскажите?)

[Иван]

Magtir, не совсем понятно что значит "глобальный файл style.scss", с точки зрения вебпака - есть одна точка входа - entry (у тебя это './src/main.ts'), которая тянет все встречаемые зависимости, прогоняя их через loaders, поэтому если нужный тебе файл не подтянулся - значит он не подключен в качестве зависимости ни в один из модулей (воткни его в какой нибудь файл, где у тебя подключаются прочие .scss типа - import './src/global/style.scss' - тут уже надо смотреть как у тебя модули описаны)