Как обработать CSS с Postcss внутри Sapper-шаблона с накопительным пакетом - PullRequest
Новая
       87

Как обработать CSS с Postcss внутри Sapper-шаблона с накопительным пакетом

1 голос
/ 26 мая 2019

Возникли проблемы при использовании 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 к плагинам в клиенте: {} of rollup.config.js - css перерывы на сайте.

1 Ответ

0 голосов
/ 01 июня 2019

Это вопрос простого соединения конфигурации плагина 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
            }),
            ...

Как вы видите здесь, вам нужно установить опцию preprocess плагина svelte.

...