Importing module which uses styled-jsx throws import error in css/sass

[afzal273]

Hello I have a react components module that uses styled-jsx and styled-jsx-plugin-sass; now I'm importing components from that module into my next project using next-plugin-transpile-modules, but I'm getting this error when a component uses styles that have imports in them.

Module build failed: Error: .../node_modules/test-react-styled-jsx-components/components/styles/buttons.css: File to import not found or unreadable: variables

buttons.css looks like this

@import 'variables';

.rdc-btn {
  font-weight: 500;
  padding: 0.75em 1.5em;
  display: inline-block;
  border-radius: $border-radius;
  border: 1px solid $color-dark;
  font-size: 1em;
  cursor: pointer;
  &:hover {
     background: blue;
 }
}

Variables is a sass file (_variables.sass)

Inside button component we do

import PropTypes from 'prop-types';

import styles from './styles/buttons.css';

const Button = ({children, ...rest }) => (
  <button className="rdc-btn" {...rest}>
    <style jsx>{styles}</style>
    {children}
  </button>
);

export default Button;```

This component works fine when imported in the same project, but throwing the error when used in another module that is using this module.

[jamesgorrie]

@afzal273 you need a css loader: https://github.com/wellcometrust/wellcomecollection.org/blob/master/common/next/next.config.js#L28-L43

Another simpler version: https://github.com/zeit/next.js/blob/canary/examples/with-external-styled-jsx-sass/next.config.js