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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SCSS includes with Vue CLI 3

Thread ID:

Created:

Updated:

Platform:

Replies:

144833 May 24,2019 04:14 PM UTC Oct 25,2019 11:25 AM UTC Vue 6
loading
Tags: Data Grid
Terry
Asked On May 24, 2019 04:14 PM UTC

I'm having the same SCSS include issue as a few other people have reported on the forum. However, I'm using Vue CLI 3, so instead of editing the webpack file, I need to add the includePaths parameter to vue.config.js file. So far I haven't been able to get it working.

This fails when the nested vue grid SCSS file attempts to import the non-vue grid SCSS file:

<style type="scss">
@import "~@syncfusion/ej2-vue-grids/styles/bootstrap4.scss"
</style>

This is the error:

./node_modules/@syncfusion/ej2-vue-grids/styles/grid/bootstrap4.scss (./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/@syncfusion/ej2-vue-grids/styles/grid/bootstrap4.scss) Module not found: Error: Can't resolve './ej2-grids/styles/grid/bootstrap4.scss' in 'D:\code\noble\node_modules\@syncfusion\ej2-vue-grids\styles\grid'




Here's the related piece of the vue.config.js file:

module.exports = {
css: {
loaderOptions: {
sass: {
includePaths: [
path.resolve(__dirname, "./node_modules/@syncfusion")
]
}
}
},


Any help would be greatly appreciated. I've been stuck on this all morning, and I've pulled out what little is left of my hair.


Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 27, 2019 08:42 AM UTC

Hi Terry, 

Thanks for contacting Syncfusion support. 

We suggest to configure the includePaths parameter in webpack.config.js instead of vue.config.js. We have already discussed about this topic in our help documentation. So please refer the below help documentation for more details, 


Regards, 
Thavasianand S. 


Derrick Whiting
Replied On June 28, 2019 08:55 PM UTC

I'm having the same issue.  From what I've read you can't modify the webpack.config.js file directly.  You have to do it through the vue.config.js file.  Here's a link - https://stackoverflow.com/questions/52768078/in-vue-cli-3-0-how-to-generate-complete-webpack-config-js.  I've been trying to do it but have not been successful either.

Derrick Whiting
Replied On June 28, 2019 09:22 PM UTC

Haha - I just got it working - putting this here in case anyone else is having this problem.  I just added the following to the module.exports in the vue.config.js file


css: {
loaderOptions: {
sass: {
includePaths: [path.resolve(__dirname, 'node_modules/@syncfusion')]
}
}
},

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 1, 2019 05:23 AM UTC

Hi Derrick, 
 
Thanks for your appreciation. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S.  


Jim
Replied On October 24, 2019 11:57 AM UTC

Haha - I just got it working - putting this here in case anyone else is having this problem.  I just added the following to the module.exports in the vue.config.js file


css: {
loaderOptions: {
sass: {
includePaths: [path.resolve(__dirname, 'node_modules/@syncfusion')]
}
}
},

Can you post your whole vue.config.js file? I tried pasting in your bit of config and get this error:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema. - options has an unknown property 'includePaths'. These properties are valid: object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? } at validate (/home/neteng/vuetest/test/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:50:11) at Object.loader (/home/neteng/vuetest/test/node_modules/sass-loader/dist/index.js:36:28)

My vue.config.js  looks like this:

const path = require('path');

module.exports = {
  css: {
    loaderOptions: {
      sass: { 
        includePaths: [path.resolve(__dirname, "./node_modules/@syncfusion")]        
      }
    }
  },
  "devServer": {
    "contentBase": "build",
    "hot": true,
    "historyApiFallback": true,
    "host": "0.0.0.0",
    "port": "8080",
    "disableHostCheck": true,
    "compress": false,
    "inline": true,
    "stats": "none"
  },
  outputDir: path.join(__dirname, 'build'),
 
  "transpileDependencies": ["vuetify"]
}

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 25, 2019 11:25 AM UTC

Hi Jim,  

It seems like the includePaths must be moved to sassOptions. Refer to the following thread. 

 
Regards,  
Seeni Sakthi Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon