I have a lerna monorepo, with two packages: marketing-site and button. My marketing-site package uses a webpack config, with the following rules:
{
test: /\.scss$/,
use: [
{
loader: 'css-loader',
options: {
modules: true,
},
},
'sass-loader',
],
},
{
test: /\.jsx?$/,
include: [ // the include key does not seem to make a difference
path.join(__dirname, '..'),
],
use: 'babel-loader'
},
If I am in marketing-site/src/index.js, and I import styles from '../button/src/styles.scss', it works. The scss is processed by the sass-loader and the css-loader.
However, if I import '../button/src', which itself has import './style.scss', I get a SyntaxError: Unexpected token.
Likewise, if I move the entire button folder into marketing-site, everything works fine.
Is there any way to force webpack to use its loaders to process scss files that in another directory outside of the root?
(I unfortunately need to specify the loaders to be used in this webpack configuration, as there is another project in the same monorepo that uses a different set of loaders. We'd like to share this button component between the two. Thus, using plugins in button/.babelrc will not suffice.)
