import css to pages/_app.js

Author: vdvibhu20

next.config.js

@@ -1,17 +1,7 @@
-const withSass = require('@zeit/next-sass')
-const withCss = require('@zeit/next-css')
-const webpack = require('webpack')
-const {parsed: localEnv} = require('dotenv').config();
+const path = require('path')
 
-module.exports = withCss(
-    withSass({
-        webpack: config => {
-            // Fixes npm packages that depend on `fs` module
-            config.node = {
-                fs: 'empty'
-            }
-            config.plugins.push(new webpack.EnvironmentPlugin(localEnv))
-            return config
-        }
-    })
-);
+module.exports = {
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'styles/**/*.scss')],
+  },
+}

package.json

@@ -33,8 +33,6 @@
     "@sentry/browser": "^5.6.3",
     "@syncfusion/ej2-react-dropdowns": "^17.2.39",
     "@syncfusion/ej2-react-grids": "^17.2.39",
-    "@zeit/next-css": "^1.0.1",
-    "@zeit/next-sass": "^1.0.1",
     "axios": "^0.19.0",
     "cookie-parser": "^1.4.4",
     "dotenv": "^8.0.0",
@@ -49,11 +47,12 @@
     "query-string": "^6.12.1",
     "react": "^16.8.6",
     "react-copy-to-clipboard": "^5.0.2",
-    "react-datepicker": "^2.14.1",
+    "react-datepicker": "^4.8.0",
     "react-dom": "^16.8.6",
     "react-modal": "^3.9.1",
     "react-select": "^3.0.4",
     "react-spinners": "^0.6.1",
+    "sass": "^1.57.1",
     "sweetalert2": "^8.13.0",
     "sweetalert2-react-content": "^1.1.0",
     "yup": "^0.28.5"
@@ -65,7 +64,6 @@
   "devDependencies": {
     "@sentry/webpack-plugin": "^1.8.1",
     "css-loader": "^2.0.0",
-    "node-sass": "^4.12.0",
     "sass-loader": "^7.1.0",
     "webpack": "^4.39.1"
   }

pages/_app.js

@@ -0,0 +1,16 @@
+import '../styles/components/CheckLogin.scss'
+import '../styles/components/FieldWithElement.scss'
+import '../styles/components/layout.scss'
+import '../styles/components/Modal.scss'
+import '../styles/components/Pagination.scss'
+import '../styles/components/Price.scss'
+import '../styles/components/ProductsChooser.scss'
+import '../styles/pages/global.scss'
+import '../styles/pages/index.scss'
+import '../styles/pages/admin/coupons.scss'
+import '../styles/pages/admin/coupons2.scss'
+import '../styles/pages/admin/products.scss'
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}

styles/pages/admin/coupons.scss

@@ -1,5 +1,3 @@
-@import "../global.scss";
-
 #search {
   font-size: 14pt;
 }

styles/pages/admin/coupons2.scss

@@ -1,4 +1,4 @@
-@import "../global.scss";
+
 
 #random_coupon {
   font-size: 12pt;

styles/pages/admin/products.scss

@@ -1,6 +1,3 @@
-@import "../global.scss";
-@import "./coupons.scss";
-
 .product-search-card {
   height: 100%;
   border: 2px solid #e9e9e9;

styles/pages/global.scss

@@ -1,6 +1,7 @@
-@import "../../../node_modules/@syncfusion/ej2-base/styles/material.css";
-@import "../../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
-@import "../../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
+@import "../../node_modules/react-datepicker/dist/react-datepicker.min.css";
 
 .title {
   font-weight: 100;