I am working on a task to import a CSS file, extract its contents, and then generate an array of class names.
Unfortunately, the code snippet below only returns an empty object in the log.
import Stylesheet from './styles.css'
console.log(Stylesheet)
I have explored various resources like NPM packages, Github, and Google in search of a suitable package for this purpose, but I haven't found one yet.
// ignore webpack loader syntax warning
import css from '!!css-loader?{"sourceMap":false,"exportType":"string"}!./styles.css';
Although Create React App (CRA) utilizes Webpack internally, it doesn't provide direct access to editing the webpack.config.js file. Many existing solutions suggest using the deprecated raw-loader, while the recommended approach involves asset modules which require modifying webpack.config.js (not possible in CRA).
To circumvent this limitation without relying on non-native packages, we can leverage inline loaders.
Determine the necessary loader, such as css-loader for this case. Various loaders serve different file types.
Inspect the loader's options to ensure compatibility with our requirements, like obtaining a string output. Verify the presence of an exportType option that suits our needs.
Construct the code with specified options. Begin with a basic import statement:
import css from './styles.css'
Add the required loader:
import css from '!!css-loader!./styles.css'
Append the desired options using a JSON object query parameter:
import css from '!!css-loader?{"sourceMap":false,"exportType":"string"}!./styles.css'
The sourceMap is set to false to exclude compressed data comments at the end of the imported string by default.
Finally, instruct your linter to ignore the atypical syntax:
// eslint-disable-next-line import/no-webpack-loader-syntax
import css from '!!css-loader?{"sourceMap":false,"exportType":"string"}!./styles.css';
For a solution, you can refer to this suggested configuration
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['to-string-loader', 'css-loader'],
},
],
},
};
If you have the 'css-loader' plugin set up, you should be able to import the css file and then use the toString method on it.
const cssContent = require('./test.css').toString();
If you want to import a CSS file as a module in React, make sure it is named with mystyle.module.css instead of just mystyle.css. Then you can use the following code:
import styles from './mystyles.module.css'
console.log(styles)
For more information on React CSS modules, check out: https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet To learn more about CSS modules in general, visit: https://css-tricks.com/css-modules-part-1-need/
For those utilizing webpack, it is recommended to incorporate the css-to-string-loader loader into their project.
var styleString = require('css-to-string-loader!css-loader!./file.css');
After developing a simple blog application using php, I have incorporated an html form with the main blog article written within a <textarea>. The functionality works well as the data is stored in a database and can be accessed by other pages. Despi ...
My task seemed simple at first: to render a React component based on its name/type. Here is an example of how it is used: // WidgetsContainer.ts // components have a difference in props shape! const componentsData = [ { type: 'WIDGET_1', ...
I currently possess a lookupMap variable that contains an index of counties and their corresponding codes. Here is a snippet: { ANDERSON: { county: 'ANDERSON', code: 'us-tx-001' }, ANDREWS: { county: 'ANDREWS', code: ' ...
Currently, I have two arrays - arrayGuest and arrayRent. They both contain objects with a common field, GuestID. My goal is to create a list that combines fields from both arrays when their guestIDs match. The structure of the objects is as follows: class ...
Recently, I encountered an issue with circular dependencies in my project. While I was able to resolve it, I would like to prevent this from happening again in the future. I am considering creating a plugin that can detect circular dependencies throughout ...
I'm really struggling to complete a FullStackOpen exercise that requires rendering data to the page. With the following code, I need to display the number of Parts each Course has and also reduce the number of Exercises/Parts to show the total exercis ...
I am currently revamping the content on my work website using Joomla. I have received the old copy and now I need to enhance it. The website in question is 24x7cloud.co.uk. At the bottom of the page, I aim to include an "Accreditation's" section. Howe ...
Is there a way to incorporate JavaScript into external files without relying on the use of base/root URLs in HTML/PHP templates? Everything is functioning properly except for the need to determine the base/root URL in an included JS file. Dilemma: I am se ...
After successfully setting up CSS rotation for all browsers, I am now looking to achieve the same effect using JavaScript. jQuery is also being utilized in this process with the following code snippet: .css({ '-ms-filter':"progid:DXImageTransfor ...
I'm currently facing an issue with a button that isn't functioning as expected in the screenshot provided. I'm hopeful that someone can assist me with this. Button functionality The button itself is not clickable, but I am able to submit t ...
Almost done with my website and it looks great on Firefox and IE 8, but Chrome is causing issues. Here's how it appears on FF: And here's Chrome: Notice how Chrome resizes the first image even though the code is the same as the one below? Che ...
How can I update a specific value within a nested array so that the change is reflected in all child and sub-child elements, similar to how selecting a parent node in a tree view selects all its children automatically? https://i.sstatic.net/0f2GE.png http ...
Is there a way to display both the box and object inside the box using three.js? I attempted to achieve this by creating a cubeGeometry: var cubeMaterials = new THREE.LineBasicMaterial({wireframe:true,wireframeLinewidth:8,} ); var cubeGeometry = new THRE ...
Trying to extract and link values from a selected option in the dropdown menu, which is populated with data fetched from MongoDB locations during the componentDidMount() lifecycle method. I aim to create functionality where selecting an option populates c ...
My current goal: The requested code: <div class="contain-to-grid"> <nav class="top-bar" data-topbar role="navigation"> <ul class="title-area"> <li class="name"><h1><a href="#">LOGO</a></h1>< ...
I have a jQuery snippet on my page: $( document ).ready(function() { $("#URL").on("input load", function(e) { console.log(e.type) .... }); }); Further down the page, I also have... <input id="URL" type="text" value="<?=$_GE ...
I have encountered an issue while using the Headlessui combobox component in conjunction with Yup. Despite successfully storing the selected value in the selectedMemory state variable, Yup consistently generates a required error message. I seem to be overl ...
I came across an interesting code example on a website called w3schools.com that I would like to incorporate into my Django project. The code utilizes the jquery load() function to load a text file into an HTML file. Here is a snippet of the code: <!DOC ...
After following the instructions in font awesome documentation, I have globally configured my host. My current setup is: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ npm config set "//npm.fontawesome.com/:_authToken" "${NPM_FONT_AW ...
Is there a more recent set of types available for ChartJS? I found a package called @types/chartjs, but it seems to be deprecated. Having autocomplete when defining options would be really helpful. Currently, using pure JS: const config = { type: &apo ...