z80b
@z80b
Frontend

Rollup и Stylus import?

Пытаюсь присобачить Stylus к сборщику на Rollup. Подключить получилось все собирается, но надо подключить именно в сборщике импорт переменных и миксинов. И вот здесь что-то не задалось.
Вот фрагмент где я его подключаю:
postcss({
    use: {
      stylus: {
        import: path.join(__dirname, 'src/blocks/vars.styl'),
      },
    },
    plugins: [
      cssnano(),
    ],
    extract: true,
    output: 'index.css',
  }),


На всякий, весь сборщик:
import { rollup } from 'rollup';
import path from 'path';
import alias from '@rollup/plugin-alias';
import replace from '@rollup/plugin-replace';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import stylusCssModules from 'rollup-plugin-stylus-css-modules';
import stylus from 'stylus';
import cssnano from 'cssnano';
import vue from 'rollup-plugin-vue';
import esbuild from 'rollup-plugin-esbuild';
import { terser } from 'rollup-plugin-terser';

async function build(plugins) {
  const bundle = await rollup({
    input: 'src/page.js',
    plugins: plugins,
    treeshake: true,
  });
  bundle.write({
    file: 'page.js',
    format: 'iife',
    sourcemap: false,
  });
}

const production = !process.env.ROLLUP_WATCH;

const rollupPlugins = [
  alias({
    entries: [
      { find: '@', replacement: __dirname + '/src' },
      { find: '@c', replacement: __dirname + '/src/components' },
      { find: '@b', replacement: __dirname + '/src/blocks' },
      { find: '@a', replacement: __dirname + '/src/api' },
    ]
  }),

  // stylusCssModules({
  //   sourceMap: true,
  //   output: (css) => {
  //     return postcss([
  //       // postcss' plugins...
  //     ]).process(css, {
  //       map: true
  //     }).then((result) => {
  //       fs.writeFileSync('index.css', result.css);
  //     });
  //   }
  // }),

  // stylusCssModules({
  //   include: 'src/blocks/vars.styl',
  // }),
  // stylusCssModules(),
  postcss({
    use: {
      stylus: {
        import: path.join(__dirname, 'src/blocks/vars.styl'),
      },
    },
    plugins: [
      cssnano(),
    ],
    extract: true,
    output: 'index.css',
  }),

  vue({ css: false }),

  replace({
    'process.env.NODE_ENV': JSON.stringify('production'),
    'preventAssignment': true,
  }),

  resolve({ extensions: ['.js', '.vue'], browser: true, preferBuiltins: true }),

  commonjs(),

  esbuild({
    // minify: production,
    target: 'es2015',
  }),

  terser({
    output: {
      comments: false,
    },
  }),
];

build(rollupPlugins);
  • Вопрос задан
  • 148 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы