Question about importing css and scss.

[davetbo-amzn]

Hello,

I'm trying to use your boilerplate to create a boilerplate of Electron, React, Redux, and Amplify. However, when I do this in my Javascript:
import '@aws-amplify/ui-react/styles.css';

and then do yarn run develop, it compiles OK but I get this in the console output:
Uncaught Error: Cannot find module '@aws-amplify/ui-react/styles.css

So then I figured maybe I should do a .babelrc like this:

{
    "plugins": [
      ["react-css-modules", {
        "filetypes": {
            ".css": {
                "syntax": "postcss-scss"
            }
        }
      }]
    ]
  }

With that .babelrc enabled I get this error when I run yarn run develop:

 'dev-build-scripts' errored after 759 ms
 TypeError in plugin "gulp-babel"
electron-react-redux-boilerplate/app/renderer/components/App.js: Class extends value undefined is not a constructor or null

My App.js file is as follows:

import React, { Component } from 'react';
//import { Amplify, Auth } from 'aws-amplify';
//import { withAuthenticator, Button, CheckboxField } from '@aws-amplify/ui-react';
//import '@aws-amplify/ui-react/styles.css';
//import awsExports from '../../aws-exports';
import './css/App.css'; 

//Amplify.configure(awsExports);
//Auth.configure(awsExports);

class App extends Component {
  constructor(props) {
    super(props);
    this.props = props;
  }
  render() {
    return (
      <div className="eaContainer">
      <h2>Electron React Amplify Demo</h2>
      {/* <CheckboxField
        label="Launch at startup: "
        labelPosition="start"
        type="checkbox"
        onChange=''
        className="eaInput"
        checked=''
    />*/}
      
      <span>Selected analytics tool: {false}</span>
      <a onClick={false}>Select analytics tool</a>
  
      {/*<Button
        className="eaButton"
        variation="primary"
        onClick={false}
      >
        Start Analytics Tool
      </Button>
      <Button
        className="eaButton"
        onClick={this.props.signOut}
      >
        Sign out
  </Button>*/}
    </div>
    );
  }
}
//export default withAuthenticator(App);
export default App;

As you can see I commented out everything Amplify-specific. I should note that './css/App.css' is plain CSS. I get the same result if I try to uncomment the line that imports '@aws-amplify/ui-react/styles.css' so I know I can't import things from node modules either.

I'm sure it's because I'm not super familiar with Gulp and Babel, but could you provide an explicit example where importing CSS and SCSS works and gets compiled down to regular CSS either way, like it would do if I did npx create-react-app? I'm an SA, not an SDE :D.

[davetbo-amzn]

Also I see you've referred people to issue #80 but that's just for copying CSS, not compiling the SCSS.

[davetbo-amzn]

Correction. It couldn't find my ./css/App.css file because it was a path error. However, I switched to this plugin in .babelrc :

{
  "plugins": [
    "babel-plugin-transform-scss"
  ]
}

and now it compiles without the word salad error. However, when it loads the window the console still says it can't find the node module import:
Cannot find module '@aws-amplify/ui-react/styles.css'

[davetbo-amzn]

This .babelrc from this webpack issue got me working:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "targets": {
          "browsers": [
            "last 1 version",
            "> 1%",
            "maintained node versions",
            "not dead"
          ],
          "node": 10
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-transform-runtime", "css-modules-transform"]
}

[davetbo-amzn]

I just noticed it's not erroring out but it's also not actually loading the CSS from the @aws-amplify/ui-react/styles.css. It should have a static/css output somewhere if it worked like the npx create-react-app. Apologies for my lack of depth on the node.js build processes. Any ideas on what I need to get my CSS to static compile when importing it into my Javascript or Typescript files?

[davetbo-amzn]

It seems like the solution should be added into your developBuild function since it needs to act on CSS imported from inside the JS files you're processing.

function developBuild() {
  return src('app/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(sourcemaps.write())
    .pipe(dest('build'));
}

So probably I'm on the right path about getting the right plugin during that pipe(babel()) step.

[pronebird]

Hey Dave,

I think Babel should expand those CSS @imports into JS objects (if you have the transformer plugged in) and output them along with JS source under build/ folder. Last time I played with CSS modules and Babel, it looked like it couldn't figure out dependencies between JS files and changed CSS. So hot reload was kind of broken.

For TypeScript specifically, project configuration is a little different and I usually send people to take a look at mullvad/mullvadvpn-app@ca022b8#diff-f31c2ebc4f1f1d98595dcf39ed151888d164b0a80da5f35d932540a44377a905 which has incremental TypeScript compiler plugged in, but that does not give you any CSS/SASS support. We mostly use Styled components and those things are pure JS.

[pronebird]

Do you use https://github.com/gajus/babel-plugin-react-css-modules for Babel?

[davetbo-amzn]

I was using import and not @import. Does babel require the @? On Aug 8, 2022 12:14 PM, Andrej Mihajlov ***@***.***> wrote: Do you use https://github.com/gajus/babel-plugin-react-css-modules for Babel? - Reply to this email directly, view it on GitHub<#126 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AOLHGXFHC2S3GQZM4IHWGV3VYFMBPANCNFSM55533BSA>. You are receiving this because you modified the open/close state.Message ID: ***@***.***>

[pronebird]

@davetbo-amzn typo on my side. In JS you should use import <module> same way you import other JS modules, but in CSS it's @import <url>;.