I have a color.scss and main.scss file as below
//color.scss
$special-blue: #0000ff;
:export {
testBlue: $special-blue;
}
//main.scss
@import 'src/colors';
And by having the above setup, using webpack to create CSS via couple of webpack-loaders such as css-modules-typescript-loader, css-loader, postcss-loader, sass-loader. Once the webpack compilation done, I will get the bundled CSS together with main.scss.d.ts with the following content
interface CssExports {
'testBlue': string;
}
export const cssExports: CssExports;
export default cssExports;
Then what I've done was published NPM package, consist of main.scss, bundled.css & main.scss.d.ts. When I import the package into my React project, and running the project, I am hitting error
Failed to compile. SassError: File to import not found or unreadable: src/color.scss on line 1 of xxxxxx/main.scss
From the look of it, it seems like I can't just copy only main.scss, but I need to copy the entire SCSS source code, just so that I can reference SCSS variables?
Wondering if there is any alternative solution?