1

I have deployed my application to aws and I see that the application renders fine, except that the syncfusion controls do not render correctly. Google chrome console does not show any errors. The application renders correctly in my local machine.

enter image description here

To fix this, it was suggested I move the import '@syncfusion/**/styles/material.css' statements in the individual vue component to App.vue (as documented here). I however get a "Failed to resolve loader: sass-loader, You may need to install it" error(the application has node-sass, sass-loader installed already).

How should I include css files along with scss files, in my application?

Before: vocabulary.vue:

<script>
import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-vue-inputs/styles/material.css';

package.json:

"devDependencies": {
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
}

vue.config.js:

module.exports = {
  publicPath: '/',
  transpileDependencies: [
    'vue-echarts',
    'resize-detector'
  ],
  configureWebpack: {
    devtool: 'source-map',
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  }
}

App.Vue:

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
</style>
Ajit Goel
  • 4,180
  • 7
  • 59
  • 107
  • Did you make sure to run `npm install` after adding the loader to `package.json`? – Phil May 21 '20 at 01:17
  • Thanks @Phil. The application already had node-sass, sass-loader installed but as a last resort, I deleted the npm packages and reinstalled them again. It worked. – Ajit Goel May 21 '20 at 01:33

1 Answers1

0

Deleting the npm packages and re-installing them again fixed the issue.

Ajit Goel
  • 4,180
  • 7
  • 59
  • 107