Upgrade with-carbon-components to built-in SCSS (#10321)

Co-authored-by: Joe Haddad <[email protected]>

examples/with-carbon-components/next.config.js

@@ -1,23 +1,5 @@
-const withSass = require('@zeit/next-sass')
-const withImages = require('next-images')
-
-module.exports = withImages(
-  withSass({
-    webpack(config) {
-      config.module.rules.push({
-        test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 100000,
-            publicPath: './',
-            outputPath: 'static/',
-            name: '[name].[ext]',
-          },
-        },
-      })
-
-      return config
-    },
-  })
-)
+module.exports = {
+  experimental: {
+    scss: true,
+  },
+}

examples/with-carbon-components/package.json

@@ -10,12 +10,10 @@
   },
   "license": "ISC",
   "dependencies": {
-    "@zeit/next-sass": "^1.0.1",
     "carbon-components": "^9.6.4",
     "carbon-components-react": "^6.19.1",
     "carbon-icons": "^7.0.7",
     "next": "latest",
-    "next-images": "^0.10.6",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   }

examples/with-carbon-components/pages/_app.js

@@ -0,0 +1,7 @@
+import '../styles/custom-theme.scss'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/with-carbon-components/pages/index.js

@@ -1,8 +1,6 @@
 import React, { Component, Fragment } from 'react'
 import { Button } from 'carbon-components-react'
 
-import '../static/myCustomTheme.scss'
-
 export default class DemoApp extends Component {
   render() {
     return (

examples/with-carbon-components/styles/custom-theme.scss

@@ -0,0 +1,2 @@
+@import './export.scss';
+@import '~carbon-components/scss/globals/scss/styles.scss';