Vue + SCSS

[Oleg]

Hi

I'm using npm and looking how I can add SCSS of the specific modules in my project?

I need grid and calendar SCSS

Example:

@import "./node_modules/@syncfusion/ej2-base/styles/material.scss";

@import "./node_modules/@syncfusion/ej2-buttons/styles/button/material.scss";

returns

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import 'ej2-base/styles/material-definition.scss';

^

File to import not found or unreadable: ej2-base/styles/material-definition.scss.

So - the system see no ej2-base/styles/ path

What will be the right syntax to have grid and calendar (buttons,dialogs, etc) works?

 need SCSS - because I have to use variables based on selected theme - css is not the option

please advise

[Mydeen S N]

 

Hi Oleg, 

 

Greetings from Syncfusion support. 

We suspect that the issue in the scss compilation is due to  not setting  the includePaths option in the webpack.config.js . We suggest you to configure the includePaths option in the vue-loader  settings in the webpack.config.js file to resolve the issue as mentioned in the below code snippet. 

 

 

module: {  

        rules: [  

            ....  

            ....  

            {  

                test: /\.vue$/,  

                loader: 'vue-loader',  

                options: {  

                    loaders: {  

                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map  

                        // the "scss" and "sass" values for the lang attribute to the right configs here.  

                        // other preprocessors should work out of the box, no loader config like this necessary.  

                        'scss': [  

                            'vue-style-loader',  

                            'css-loader',  

                            {  

                                loader: "sass-loader",  

                                options: {  

                                    includePaths: [  

                                        path.resolve(__dirname,"./node_modules/@syncfusion")  

                                    ]  

                                }  

                            }  

                        ]  

                        ....  

                        ....  

                    }  

                }  

            }  

            ....  

            ....              

        ]  

}  

  

 

  

And now, we can add the SCSS file reference directly in the App.vue file using below code snippet.  

 

<style lang="scss">  

@import "../node_modules/@syncfusion/ej2-base/styles/material.scss"; 

@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css"; 

@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.scss"; 

@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.scss"; 

</style>  

  

 

  

For your convenience, we have created a simple sample and the same can be download from the below link.  

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/7z/vueWithSass-298006107/   

You can refer the below documentation for theme variables which you can used to customize the theme.  

https://ej2.syncfusion.com/vue/documentation/appearance/theme/#googles-material     

Please find the example code snippet for overriding the accent color for our components in material theme. 

<style lang="scss"> 

// for example, we have override our variable color here 

$accent: black; 

// syncfusion styles 

@import "../node_modules/@syncfusion/ej2-base/styles/material.scss"; 

@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css"; 

@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.scss"; 

@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.scss"; 

</style> 

 

Let us know if you need further assistance on this. 

Regards, 

Mydeen SN 

 

[Oleg]

Great! Thank you! this is exactly what I was looking for!!!!

[Mydeen S N]

Hi Oleg, 

We are happy that the problem has been solved. 

  

Please get back to us if you need any further assistance. 

  

Regards, 

Mydeen S N