Question

在首页上，我有一个“松散”的CSS文件（@imports其他CSS文件），我想充当为网站加载的全局CSS样式。网站本身正在改进，但它还没有准备好完成整个模块加载系统，所以目前，客户端首先会遇到一个与index.html相当的东西（在那之下将是模块加载的组件，我'将使用webpack进行转换）

我希望能够使用webpack来获取全局CSS并对其进行优化（通过PostCSS和其他插件）。但看起来像webpack只喜欢基于javascript的实际入口点。

我的策略是告诉webpack使用全局CSS作为入口点，并生成一个优化的捆绑CSS，该CSS由全局的所有@imported CSS组成。

我是否必须在该文件上单独运行类似PostCSS的内容？或者明确加载PostCSS并在webpack配置中运行它（如果是这样，最好的方法是什么？）。

Answer 1

目前，我正在使用PostCSS网站上的JS API示例，以便将其作为读取我的全局CSS的基础，并将其转换为普通的CSS以包含在首页中。

（来自JS API sample）

const fs = require('fs');
const postcss = require('postcss');
const precss = require('precss');
const autoprefixer = require('autoprefixer');

fs.readFile('src/app.css', (err, css) => {
    postcss([precss, autoprefixer])
        .process(css, { from: 'src/app.css', to: 'dest/app.css' })
        .then(result => {
            fs.writeFile('dest/app.css', result.css);
            if ( result.map ) fs.writeFile('dest/app.css.map', result.map);
        });
});

如何配置webpack以加载和优化CSS文件

1 个答案: