SCSS includes with Vue CLI 3

[Terry]

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.

[Thavasianand Sankaranarayanan]

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, 

Documentation link: https://ej2.syncfusion.com/vue/documentation/getting-started/vue-sass/#adding-includepaths-option 

Regards, 

Thavasianand S. 

[Derrick Whiting]

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]

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]

Hi Derrick, 

 

Thanks for your appreciation. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.  

[Jim]

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]

Hi Jim,  

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

https://github.com/webpack-contrib/sass-loader/issues/756 

 

Regards,  

Seeni Sakthi Kumar S