I use webpack to build a react application using styled-components written in TypeScript. I also use PostCSS with autoprefixer to support CSS grids on older browsers. The compilation works but the generated sourcemaps aren't correct. If I view them in Chrome the "original source" shows the output of PostCSS instead of the original tsx-source. Here is my webpack.config.js (sourcemaps are enabled in tsconfig.json):
module.exports = {
mode: "development",
entry: {
"GridTest.js": "./Source/View/GridTest.tsx",
},
output: {
filename: "../../bmdnet/js/packed/[name]"
},
devtool: "source-map",
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: "ts-loader",
},
{
loader: "postcss-loader",
options: {
plugins: () => ([
require("autoprefixer")({ grid: true }),
require("postcss-fail-on-warn"),
]),
syntax: "postcss-jsx",
sourceMap: true,
},
},
],
},
]
},
};
This is my test file GridTest.tsx:
import * as React from "react";
import styled from "styled-components";
export const GridTest = styled(() => <div />)`
& {
display: grid;
}
`;
This is the "original source" of GridTest.tsx as shown for e.g. in Chrome dev tools:
import * as React from "react";
import styled from "styled-components";
export const GridTest = styled(() => <div />)`
& {
display: -ms-grid; // this line should not be here
display: grid;
}
`;
I can't find any information about how webpack generates source maps when using multiple loaders. I assumed webpack would apply the first source map (from postcss-loader) to the second sourcemap (from ts-loader) and generate a final source map that points from the final output to the original file which unfortunately does not seem to be the case. I debugged the source of the ts-loader and the source map from postcss-loader is passed to it, but the ts-loader does not use it and assumes it's input is the original source.
This is not too bad when debugging in Chrome but it is terrible when compilation fails and a wrong line number is shown. I don't even know if the second problem can be solved using source maps.
I already tried reversing the order of ts-loader and postcss-loader but postcss-jsx does obviously not work after the transformation into plain JavaScript.
Does anyone have an idea how to solve this problem?
I've been trying to use sass-loader on webpack v4, but it fails to load scss files in a React component with TypeScript.
Here is a simplified snippet of the code.
//index.tsx
import * as React from 'react';
import './styles.scss';
const Navigation = () => {
return (<div className="app-bar"></div>)
}
//styles.scss
.app-bar {
background-color: #2196f3;
}
The following code is from my webpack config.
module: {
rules: [
//loaders for jsx, tsx etc
{
test: /\.(css|scss)$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
},
{ loader: 'sass-loader' }
]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new CleanWebpackPlugin(),
]
I followed the official doc's example, but it fails to load the styles.scss.
Just in case, I re-installed style-loader, css-loader, sass-loader (and node-sass), but it didn't solve the error.
The error message is ...
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
I'm running webpack via Laravel Mix, but don't know if Laravel has anything to do with it.
What caused this issue? Any advice will be appreciated.
You dont need to put css in the test section because the sass-loader and css-loader will take care for you and it will transform your scss to css file
Below is my config
{
test: /\.scss$/,
use: [
//'style-loader' was the culprit, so I just needed to remove it
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
I seem to remember having the same issues with webpack. I switched from SASS to Styled Components, it's a css-in-js library. I was wary at first but it's great.
https://www.styled-components.com/
It allows you to change CSS styles programmatically using React props. For example if I want to change the opacity of a menu when a button is clicked I can do it like this:
opacity: ${props => (props.menuOpen ? 1 : 0)};
That’s just one benefit, check the docs to see others. I find using React with styled-components is a great way to work. You have your JS, CSS and HTML all being generated in one place.
i have a <main> div in my react component and im importing some class name from a class css file, but the class name is not getting integrated to the main div when i try to inspect it in the browser. when i simply use other class names its working like <main className="test"> but importing classes is not working.
This is my component :
import React from 'react';
import Aux from '../../hoc/Aux';
import classes from './Layout.css';
const layout = (props) => (
<Aux>
<div>
Test paragraph
</div>
<main className={classes.Content}>
{props.children}
</main>
</Aux>
);
export default layout;
This is my css
.Content{
color: red;
margin-top: 20px;
}
I did npm run eject command after creation, if there is something to do with the webpack configuration file please help me
( i haven't made any changes there after eject command )
Here is the css part of webpack dev config file
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
}),
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
import './Layout.css';
Then use it like a normal CSS
<main className="Content">
You can also use your classes as objects with this format:
In your CSS file:
Wrap your classes and id's with :local(.className)
Example
:local(.Content) { width: 100px; }
In your React Component:
import classes from './stylesheet.css'
<div className={classes.Content}></div>
Actually I've used it like this:
import classes from './Layout.module.css';
As you see in the text of your question:
// using the extension .module.css
You have to configure some staff. follow these steps:
npm run eject run this command inside your project root directory
search cssRegex and add the following lines under use: getStyleLoaders({
modules:true,
localIdentName:'[name]__[local]__[hash:base64:5]'
Enjoy!
Make sure 'npm run eject' run successfully then you can access webpack.config.js file in config folder.
Stop the server.
Go to webpack.config.js
Find cssRegex and update as given in the image
Restart the server
If you're using Windows, don't name file 'Aux' it's reserved name.
Solution is just to name your CSS files as (in your case) Layout.module.css and then import them as such.
You don't need to eject as from the Create React App 2.0 since it uses CSS Modules out of the box.
Don't you need to specify the file's extension like import classes from './layout.css';?
Try to instal style-loader and css-loader packages. Then add to you webpack this:
{
test: /\.css$/,
loaders: [
'style-loader?sourceMap',
'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
]
}
I got if from css-modules documentation and I hope it will help you to achieve what you need.
None of the above solutions worked for me, if you're using a react version with react-scripts#2.0.0 and higher, they probably wouldn't work for you either.
you must used the CSS Modules alongside regular stylesheets using the [name].module.css file naming convention. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format [filename]_[classname]__[hash].
example Header.module.css
nb: header here can be any name
To use class names like an object you need to do 2 things:
Write import like import * as classes from './Layout.css';
Include typings defenition for your style.
Example for Typescript - create Layout.css.d.ts file with export const Content: string;
Be sure that you define camelCase option for css-loader to resolve dash-classes into camel-case properties that you define in Layout.css.d.ts.
I was also working on a react tutorial and faced same issue.
I updated my webpack.config.js file at line 420 and it was working for me then. Please try it out.
line 420:
localIdentName:'[name][local][hash:base64:5]',
For latest version no need to set
localIdentName: '[name][local][hash:base64:5]', // no need set any where
Just give your css name with postfix like FileName.module.css ex Personal.module.css
Then class name like below filename_classname_randomstring
Personal_Person__3L9tz
it working for me
this works for me
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
the other answers not worked for me
so I used this solution and worked fine
1: run the npm run eject command
2: go to config/webpack.config.js and search for cssRegex
3: use this code in that particular section
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules:{
localIdentName:'[name]__[local]__[hash:base64:5]'
},
}),
Just add the below configuration to config/webpack.config.js after running npm run eject in the command line in the project folder and select yes when propted
I have noticed many reference to test: cssRegex block, though you may not have it in the webpack config.
If the above is your case try to open webpack.config.dev.js and find block starting with test: /\.css$/, (row 160 in my case). Then add the following lines so final result looks like this:
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
},
},
This should enable css modules to work.
Here is the solution:
yarn run eject
Go to the config/webpack.config.js
Update the file as the screenshot.
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
localIdentName:'[name]__[local]__[hash:base64:5]',
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent
}),
},
I am using webpack with my reactjs and I do have the sass loader setup but I am wondering if I am importing the file the right way(It works but I am just wondering if it best practice to do it this way)
import hamburger from "../../node_modules/hamburgers/dist/hamburgers.css";
import bulma from "../../node_modules/bulma/bulma";
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.s?css$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
}
]
},
Edit
When I try to import a sass file in I get an error
import "../../node_modules/bulma/bulma";
import "../../node_modules/bulma-steps-component/bulma-steps";
they both have an extension of .sass
Error: Can't resolve '../../node_modules/bulma-steps-component/bulma-steps'
Do I need another check for this?
Edit 2
I tried adding this check in
test: /(\.css|\.scss|\.sass)$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
and did this (I needed the .sass extension to make it work)
import "../../node_modules/bulma/bulma.sass";
import "../../node_modules/bulma-steps-component/bulma-steps.sass";
But now I get
ERROR in ./node_modules/bulma-steps-component/bulma-steps.sass (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/bulma-steps-component/bulma-steps.sass)
Module build failed:
$steps-default-color: $grey-lighter !default
$steps-completed-color: $primary !default
$steps-active-color: $primary !default
$steps-horizontal-min-width: 10em !default
$steps-vertical-min-height: 4em !default
$steps-marker-size: 2 !default
$steps-divider-size: .4em !default
$steps-gap-size: .3rem !default
$steps-hollow-border-size: .3em !default
$steps-thin-divider-size: 1px !default
$steps-thin-marker-size: .8em !default
It keeps going(almost seems like it is showing me all the code in the file) but the error seems to be Undefined variable: "$grey-lighter".
I got same issue when i started with react-js but then i found this boilerplate. this is having best setup of react with redux and router.
check this out: https://github.com/coryhouse/react-slingshot
if you don't want to use this then you can refer this for your problem.
The webpack error saying it can't resolve your CSS file means the path you have specified is not correct. I'd import the file with the extension when you are importing sass or css, just like in your initial example where the css works. That will also help anyone else touching your code to know that what you are importing is not another module, but styles.
I am using this react redux starter. I want to use this starter with
ant design. But I am having a hard time to add ant design to this starter via webpack.
From the ant design doc I am suppose to use a .babelrc file to import the ant design babel library into my project. The starter doesn't use a .babelrc file to load babel plugins (as shown here), it uses the webpack configuration file.
How do I add the ant design library (the code below) into the webpack configuration file?
{
"plugins": [
["import", { libraryName: "antd", style: "css" }] // `style: true` for less]
}
NB: I already tried the approach in the ant design doc, but I get an error message: Unknown plugin "import" in *\.babelrc at 0. I also tried inserted a line ["import", { libraryName: "antd", style: "css" }] into row 76 the webpack config file of the starter, but error Unknonw plugin "import" specified in base at 4.
You have to install babel-plugin-import.
npm i babel-plugin-import --save-dev
yarn add babel-plugin-import --dev
An example of webpack config for "JSX" is shown below:
{
test: /\.jsx$/,
loader: 'babel-loader',
exclude: [nodeModulesDir],
options: {
cacheDirectory: true,
plugins: [
'transform-decorators-legacy',
'add-module-exports',
["import", { "libraryName": "antd", "style": true }],
["react-transform", {
transforms: [
{
transform: 'react-transform-hmr',
imports: ['react'],
locals: ['module']
}
]
}]
],
presets: ['es2015', 'stage-0', 'react']
}
},
The JSX files are loaded using babel-loader. babel-loader runs the plugins. One of the plugin is babel-plugin-import. This plugin ensures that antd is partially imported. import { Checkbox } from 'antd'; is converted to var Checkbox = require('antd/lib/checkbox'); by the plugin.