Пытаюсь присобачить 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);