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

SCSS includes with Vue CLI 3

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:\codeobleode_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.


6 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team May 27, 2019 12:42 AM

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. 



DW Derrick Whiting June 28, 2019 12:55 PM

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.


DW Derrick Whiting June 28, 2019 01:22 PM

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')]
}
}
},


TS Thavasianand Sankaranarayanan Syncfusion Team June 30, 2019 09:23 PM

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



JI Jim replied to Derrick Whiting October 24, 2019 03:57 AM

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


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 25, 2019 03:25 AM

Hi Jim,  

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

 
Regards,  
Seeni Sakthi Kumar S 


Loader.
Live Chat Icon For mobile
Up arrow icon