After deploying my application to AWS, I noticed that the application was rendering correctly except for the Syncfusion controls, which were not rendering correctly. Surprisingly, there were no errors shown in the Google Chrome console. On my local machine, the application renders correctly.
https://i.stack.imgur.com/4cWVT.png
To resolve this issue, it was recommended that I move the import statements for '@syncfusion/**/styles/material.css' from individual Vue components to App.vue (as mentioned here). However, when attempting this solution, I encountered a "Failed to resolve loader: sass-loader. You may need to install it" error, even though node-sass and sass-loader were already installed in the application.
How should I properly 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>