css - Webpack 和 PostCSS 单独设置

Question

我想在没有 Webpack 的情况下使用单独的命令检查 CSS 更改，因此 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'

}

Answer 1

使用

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

代替

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