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.
Related
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 am using select2 library in my react app to add some drop downs. When i am importing the css file it gives a error saying "you may need a appropriate loader to handle this file type".
so how can fix this error. In my project i am using SCSS to style my components.
picture of the error
My loader in webpack.config.js is like this
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
You can add another loader right before your scss loader
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!scss-loader'
},
I am working with webpack and I have been trying to config react-toolbox library.
I managed to make it work but the css is not loading.
webpack.config.js
You haven't configured your style loader to emit CSS modules
Add this to your style loader
loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss'
This will turn on CSS modules, and also set it up for allowing postCSS to hook up to it
Remember that this will now treat any .scss or .css file as a locally scoped module, so if you have any separate normal SCSS or CSS that you want to remain global, you will need to add another rule for them
// EDIT
It may be confused using the loader string if your other loader configs are still in that array (as the above string is shorthand to combine them all), try instead separately using config objects...
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]',
modules: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: [
postcssNext
]
}
}
]
}
React Toolbox no longer uses SCSS having migrated to PostCSS so I've left that out - if you use it then add that in the same manner
I've been playing with https://www.npmjs.com/package/react-calendar-timeline and I have an issue.
If I want to overload the timeline class, I simply do
import React from 'react'
import Timeline from 'react-calendar-timeline';
export class MyTimeline extends Timeline {
//Here I can override methods
}
export default MyTimeline;
This compiles, and works correctly.
However, if I want to make the import statement:
import Timeline from 'react-calendar-timeline/src/lib/Timeline';
(I will eventually also have to update the .../lib/Item/item.js file and therefore need to inherit timeline.js, and /lib/items/items.js to make sure that we load my overridden item.js file instead of that branch's file).
I get loader issues, and don't really understand why.
Module parse failed: PATH\node_modules\react-calendar-timeline\src\lib\Timeline.js Unexpected token (36:19)
You may need an appropriate loader to handle this file type.
|
| export default class ReactCalendarTimeline extends Component {
| static propTypes = {
I don't understand this error because if I take everything from the react-calendar-timeline/src/lib directory inside of node_modules, and put it directly into my project, I can now inherit from the Timeline.js file (I know physically moving the directory out of node modules and into my project is bad practice).
So why is webpack able to compile the same code when it is in my actual project directory instead of node_modules?
My current webpack.config
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react'],
plugins: ['transform-class-properties']
}
},
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.scss$/, loader: 'style-loader!css-loader' },
]
You need to allow babel to transform class properties using the babel-plugin-transform-class-properties plugin. Link: https://babeljs.io/docs/plugins/transform-class-properties/
How can use CSS modules in production and load standard css file in production?
I am configuring an new application with React using webpack
In development I use CSS modules using webpack loaders :
into my .jsx file I import the style file:
import style from './stile.scss';
export class App extends React.Component {
render() {
return (
<div>
<div>
<span className={style.title}>Ciao</span>
</div>
</div>
)
}
}
then I use the following webpack configuration for loaders for my stylesheets:
loaders: [
{
test: /\.(scss|css)$/,
loader: 'style-loader!css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]-[local]___[hash:base64:5]!sass-loader?sourceMap'
}
]
this way everything works (the style is included in the .js file and classes properly hased)
but in production? I should leave the browser render all the classes included in the webpack bundle.js output file?
I would rather create a css file with webpack (and ExtracttextPlugin) with all my style:
{
test: /\.(css|scss)$/,
loader: ExtractTextPlugin.extract('css-loader' )
}
and link the .css produced in my index.html
Problem is that now all my classes definitions into the React components are no longer rendered in the browser.
How should I solve this?
You can't just switch from using CSS modules to not using them, that doesn't work out as your code depends on it. Also there is no reason not to use CSS modules in production as well. What you want to change is not the CSS modules, but the way you include the CSS. Instead of having it in your JavaScript bundle you can extract them with extract-text-webpack-plugin into a separate .css file, but you still need to use the same configuration for the loaders.
webpack 1
{
test: /\.(css|scss)$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]-[local]___[hash:base64:5]!sass-loader?sourceMap')
}
The first argument style-loader is only used as a fallback if the CSS can't be extracted.
webpack 2
The arguments to ExtractTextPlugin.extract changed and for readability using options instead of an inline query in the string.
{
test: /\.(css|scss)$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
modules: true,
importLoaders: 1,
localIdentName: '[name]-[local]___[hash:base64:5]'
}
},
{ loader: 'sass-loader', options: { sourceMap: true } }
]
})
}