We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Error while using SCSS


I have been trying to use scss styles in my project but can't make it work.

I get the following error:


Can't find stylesheet to import.

@import "ej2-base/styles/tailwind.scss";


I am using vite and this is my settings:


"name": "ui",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
"dependencies": {
"@azure/msal-browser": "^2.36.0",
"@azure/msal-react": "^1.5.6",
"@microsoft/microsoft-graph-client": "^3.0.5",
"@syncfusion/ej2": "^21.1.41",
"@syncfusion/ej2-base": "^21.1.40",
"@syncfusion/ej2-react-buttons": "^21.1.37",
"@syncfusion/ej2-react-calendars": "^21.1.41",
"@syncfusion/ej2-react-dropdowns": "^21.1.41",
"@syncfusion/ej2-react-grids": "^21.1.41",
"@syncfusion/ej2-react-inputs": "^21.1.39",
"@syncfusion/ej2-react-navigations": "^21.1.39",
"@syncfusion/ej2-react-popups": "^21.1.41",
"axios": "^1.3.6",
"date-fns": "^2.29.3",
"qs": "^6.11.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.10.0"
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^4.0.0-beta.0",
"autoprefixer": "^10.4.14",
"eslint": "^8.38.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"node-sass": "^8.0.0",
"postcss": "^8.4.23",
"sass": "^1.62.1",
"sass-loader": "^13.2.2",
"tailwindcss": "^3.3.1",
"vite": "^4.3.0"





// Find why I can't change to scss...
@import '../node_modules/@syncfusion/ej2/tailwind.scss';

Everything works ok when I use @import '../node_modules/@syncfusion/ej2/tailwind.css';



1 Reply

AR Anbumani Rajendracholan Syncfusion Team May 5, 2023 12:53 PM UTC

Hi Alex,

Greetings from Syncfusion support.

We have prepared a React with Vite application using SCSS based on your requirements and were unable to replicate the reported issue on our end. Additionally, we suspect that the reported issue may be caused by the code below, which may not have been included in the vite.config.js file. For your convenience, we have attached a working sample and code snippet for further references.


Code snippet:


export default defineConfig({

  plugins: [react(), visualizer()],

  css: {

        preprocessorOptions: {

          scss: {

            includePaths: ["node_modules/@syncfusion"]






Please get back to us if you need further assistance.



Anbumani Rajendracholan

Attachment: react_with_vite_dd4ad41.zip

Live Chat Icon For mobile
Up arrow icon