#Vite show me an Stylus error when I ran development server

1 messages · Page 1 of 1 (latest)

fiery tartan
#

Hello everyone, the last days I migrate from webpack to vite in the job's project, the only trouble that I get stuck is on this error

 ERROR  12:27:10 PM [vite] Internal server error: [postcss] /Users/programador/websites/extranetvcm2020/src/styles/theme.styl:731:1: Unknown word                                                                                                                                                                   12:27:10
  Plugin: vite:css
  File: /Users/programador/websites/extranetvcm2020/src/styles/theme.styl
      at Input.error

Hi all, the last few days I have migrated from webpack to vite in the project at work, the only problem I am stuck on is this error

I don't know wich error is, because before of the migration the files with .styl extension works correctly.

queen elbow
#

we need more code or a repro for this. did you install the stylus dep?

fiery tartan
#

yes i have Installed before this is how my vite.conf.js looks like

import { defineConfig } from 'vite';
import { createHtmlPlugin } from 'vite-plugin-html';
import react from '@vitejs/plugin-react';

import path from 'path';
import nib from 'nib';
import rupture from 'rupture';

const env = process.env.NODE_ENV;

export default defineConfig({
  runtimeCompiler: true,
  root: './src',
  server: {
    port: 8082,
  },
  build: {
    // Relative to the root
    outDir: '../dist',
  },
  plugins: [
    createHtmlPlugin({
      template: './index.template.html',
      filename: './index.html',
      inject: {
        data: {
          title: (env === 'production') ? 'My App' : `My App development`,
        },
      },
    }),
    react({
      // Use React plugin in all *.jsx and *.tsx files
      include: '**/*.{jsx,tsx}',
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, './src')
    }
  },
  css: {
    loaderOptions: {
      stylus: {
        use: [nib(), rupture()],
        imports: [
          './src/styles/vars.styl'
        ]
      }
    },
    preprocessorOptions: {
      stylus: {
        use: [nib(), rupture()],
        imports: [
          './src/styles/vars.styl'
        ]
      },
    },
  },

  publicDir: path.resolve(__dirname, './static')
});
queen elbow
#

ah you have to use styl: under preprocessOptions as it works based on the file extension

#

you can also remove css.loaderOptions as Vite doesn't use that

fiery tartan
#

thanks for the response, I made the fixes in the vite conf