SCSS files when included in my file doesnt work as expected

[James]

Hello

I am currently evaluating the Vue version of some of the controls.

When including SCSS files for specific components, I am getting the following errors;

ERROR in ./node_modules/css-loader!./node_modules/@syncfusion/ej2-vue-navigations/styles/accordion/material.scss
Module not found: Error: Can't resolve './ej2-base/styles/material.scss' in '/webserver/sites/app/node_modules/@syncfusion/ej2-vue-navigations/styles/accordion'
@ ./node_modules/css-loader!./node_modules/@syncfusion/ej2-vue-navigations/styles/accordion/material.scss 3:10-86
@ ./node_modules/css-loader!./node_modules/@syncfusion/ej2-vue-navigations/styles/material.scs

The issue seems to be with the nested scss files.

Is there a fix/resolution for this?

Thanks

James

[Georgi Panayotov]

I had same problem. I fixed it with adding the following in my webpack.config.js

...

module: {
    rules: [
...
        test: /\.(sa|sc|c)ss$/,
        use: [
            {
                loader: 'vue-style-loader'
            },
            devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
            'css-loader',
            {
                loader: "sass-loader",
                options: {
                    includePaths: [
                        path.resolve(__dirname, "./node_modules/@syncfusion")
                    ]
                }
            }
        ],
...

and then include the scss files with

@import "ej2-vue-buttons/styles/material.scss";

...

[John Rajaram]

Hi James, 

Thanks for your interest in Essential JS 2 and sorry for the delay. 

We suspect that you have not set the includePaths option in the webpack.config.js file which causes the reported compilation failure. We suggest you to configure the includePaths option inside the vue-loader -> options -> loaders -> scss -> sass-loader settings in the webpack.config.js file to resolve the issue. 

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 "ej2-vue-buttons/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/forum/139116/ze/ej2-vue-scss1698420331 

Let us know if you need further assistance on this. 

Regards, 

John R 

 

[James]

@John @Georgi

Yes webpack configuration was the issue.

Thanks to the both of you for pointing it out.

Best,

James