Как включить css в пакет w / rollup.js Невозможно загрузить css файлы - Неожиданный токен - PullRequest
Новая
       9

Как включить css в пакет w / rollup.js Невозможно загрузить css файлы - Неожиданный токен

0 голосов
/ 12 сентября 2018

В настоящее время я сталкиваюсь с ошибкой при попытке связать / загрузить файл CSS в библиотеку компонентов с помощью roll up.js.Я продолжаю сталкиваться с неожиданной ошибкой токена, которая заставляет меня поверить, что он не распознает расширение.Я пробовал including CSS-файлы в плагине Babel, который не работал.Добавление заглушки postcss привело к получению этой ошибки, а не к предыдущей ошибке Can not resolve DropDown.css, но теперь я застрял.Есть идеи?

Ошибка: 

[!] (babel plugin) SyntaxError: /Users/adam.mateo/Documents/code/quovo-app/shared-components/components/DropDown/DropDown.css: Unexpected token (1:0)
components/DropDown/DropDown.css (1:0)
SyntaxError: /Users/adam.mateo/Documents/code/quovo-app/shared-components/components/DropDown/DropDown.css: Unexpected token (1:0)
> 1 | .Dropdown-root {
    | ^
  2 |   position: relative;
  3 | }
  4 |

Мой накопительный пакет: 

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import postcss from 'rollup-plugin-postcss';

export default {
  input: 'components/index.js',
  output: {
    file: 'dist/main.js',
    format: 'cjs',
  },
  plugins: [
    babel({
      babelrc: false,
      exclude: 'node_modules/**',
      plugins: [
        'transform-object-rest-spread',
        // 'external-helpers',
      ],
      presets: [
        'react',
        ['env', { 'modules': false }],
      ],
    }),
    postcss({
       extensions: ['.css'],
    }),
    commonjs(),
  ]
}

1 Ответ

0 голосов
/ 14 августа 2019

Для этого я использую отдельный плагин: rollup-plugin-scss .Он захватывает все запасные .css файлы, импортированные в компоненты, и объединяется в один пакет CSS, который входит в состав накопительного пакета вывода.

Очень простая конфигурация, которая соответствует моим потребностям, выглядит следующим образом: 

import scss from 'rollup-plugin-scss'
...

export default {
  input: 'src/index.tsx',
  output: [...],
  plugins: [
    ...
    scss(),
  ]
}

Кажется, есть дополнительные возможности для его улучшения, если это необходимо.

...