如何处理带有postcss的css -带有rollup的sapper template

Question

在sapper-template中使用rollup-plugin-postcss时遇到问题

npx degit sveltejs/sapper-template#rollup my-app

npm install rollup-plugin-postcss --save-dev

安装各种postcss插件

创建src/css/main.css

在src/client.js的顶行添加import './css/main.css';

*编辑rollup.config.js

*添加postcss.config.js

*这里出错了吗？我尝试过几种不同的版本。

// rollup.config.js
...
import postcss from 'rollup-plugin-postcss'
...

export default {
    client: {
        input: config.client.input(),
        output: config.client.output(),
        plugins: [
            replace({
                'process.browser': true,
                'process.env.NODE_ENV': JSON.stringify(mode)
            }),
            svelte({
                dev,
                hydratable: true,
                emitCss: true
            }),
            resolve(),
            commonjs(),
            postcss({
                // extract: true,
                // sourceMap: true,
                plugins: [require('autoprefixer')]
            }),
...

// postcss.config.js
module.exports = {
  plugins: {
    ...
    autoprefixer: {}
  }
};

一旦我将postcss添加到客户端的插件中，就没有真正的错误消息:站点上的{}个rollup.config.js - css中断。

Answer 1

这只是一个简单地将svelte插件配置组合在一起的问题。我建议您使用svelte-preprocess并按如下方式设置您的rollup.config.js：

import autoPreprocess from 'svelte-preprocess';

const preprocessOptions = {
    postcss: {
        plugins: [
            require('postcss-import'),
            require('postcss-preset-env')({
                stage: 0,
                browsers: 'last 2 versions',
                autoprefixer: { grid: true }
            }),
            ...
        ]
      }
};

...
export default {
    client: {
        plugins: [
            svelte({
                preprocess: autoPreprocess(preprocessOptions),
                dev,
                hydratable: true,
                emitCss: true
            }),
            ...

正如您在这里看到的，您需要设置svelte插件的preprocess选项。