Раздельная настройка Webpack и PostCSS - PullRequest
Новая
       14

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

0 голосов
/ 25 октября 2018

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

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

Я знаю, как настроить webpack и 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')
    ]
}

Конфигурация веб-пакета: 

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'

}

1 Ответ

0 голосов
/ 25 октября 2018

используйте 

  {
test: /\.css$/,
use: ['style-loader', 'css-loader']
  }

вместо 

// {
            //     test: /\.css$/,
            //     use: ['style-loader', 'css-loader', 'postcss-loader']
            // }
...