Question

在将rollup-plugin-postcss与sapper-template一起使用时遇到麻烦：

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

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

安装各种postcss插件

创建src/css/main.css

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

*编辑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选项。

如何使用汇总在sapper模板中使用postcss处理css

1 个答案: