Error while using SCSS

[Alexandre Pereira]

Hi,

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:

Package.json:

{

"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"

}

}

.env:

SASS_PATH=./node_modules/@syncfusion

VITE_SASS_PATH=./node_modules/@syncfusion

App.scss:

$primary:#ff0000;

// 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';

Thanks

Alex

[Anbumani Rajendracholan]

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:

[vite.config.js]

export default defineConfig({

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

  css: {

        preprocessorOptions: {

          scss: {

            includePaths: ["node_modules/@syncfusion"]

          }

        }

      }

})

 

Please get back to us if you need further assistance.

 

Regards,

Anbumani Rajendracholan

Attachment: react_with_vite_dd4ad41.zip