Support raw imports directly to string; useful for inline css

[warent]

I'm developing a chrome extension using react-app and would like to style the content_script with scss. The content_script doesn't allow you to load resources, they all have to be inlined.

Currently, there's no way that I know of to import the contents of a file directly into a variable; your webpack config will only provide the path to the file. Even if I convert the compiled css file into a txt file, it still only provides the path.

What we need is the ability to import a file's contents into a variable so that it can be put directly between <style></style> tags.

Is this supported and I'm overlooking it?

[Timer]

Importing css is considered applying styling, so there's no way to really do this... we can't even add an exclusion. We are going to consider importing text (into a var) from md files and txt in the future, but this will cause pain for certain individuals no matter what.

I believe your use case (and everyone's, going forward) would be best solved by #1944, which would allow you to write fs.readFileSync('file.css', 'utf8') and get the contents of the file in your variable.

There is more discussion that needs to be done on this topic, so please follow #1944 for updates. 😄

If you need an immediate solution, create a file like so:

export default `I need
this 
as text
`;

[warent]

@Timer thanks, I ended up writing a script that wrapped all the styles in an export just like that :)

[PedroFerr]

@Timer : Great! And thank you!

I have stumbled into this Git while I was looking for a way to import base64 imgs into React. Nothing seems to work because doing (having, here, the base64 string)
import MoviesComingSoon from '../_assets/imgs/coming-soon-RSS.png';
React, actually, was changing my string - have no idea why!

I've tryed a lot of img base64 NPM related ('react-image-file', 'base64-img', 'react-file-base64' etc.) but nothing seemed to work.... exactly because React was giving a hand, virtual detroying the string.

So... how would I import a string into my Component without React knowing what it's for...? And you gave me the answer! Passing plain texto down, then I know how HTML reproduces a base64 file!

Thank you!