Отдельная настройка Webpack и PostCSS

Я хочу проверить изменения CSS без Webpack, с отдельной командой, поэтому React и Typescript запускаются с Webpack, а CSS с Post CSS.

Проблема в том, что когда я запускаю команду postcss, она делает то, что должна, но Webpack возвращает ошибку. Он не может разрешить @import без загрузчика.

Я знаю, как настроить веб-пакет и CSS, но хочу сделать это так.

Вот команды и конфиги:

"start": "webpack-dev-server --open",
"css:watch": "postcss --watch ./src/css/main.css -o ./dist/main.css"

Конфигурация PostCSS:

module.exports = {
    parser: 'postcss',
    plugins: [
        require('postcss-import'),
        require('autoprefixer')
    ]
}

Конфигурация Webpack:

var path = require('path'),
    htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/index.tsx',
    output: {
        path: path.resolve(__dirname, 'dist', 'js'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader'
            },
            {
                enforce: 'pre',
                test: /\.js$/,
                loader: 'source-map-loader'
            },
            // {
            //     test: /\.css$/,
            //     use: ['style-loader', 'css-loader', 'postcss-loader']
            // }

        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './index.html'
        })
    ],
    devtool: "source-map",
    resolve: {
        extensions: [".js", ".ts", ".tsx"]
    },
    mode: 'development'

}

🤔 А знаете ли вы, что...
CSS Grid Layout предоставляет мощные средства для создания двумерных макетов сеток.