I recently ejected my create-react-app because I need to load sass files. Unfortunately, create-react-app uses webpack 1. But, the current version of sass-loader includes a dependency on webpack 2. The support docs don't indicate the last sass-loader version that supports webpack 1. Does anyone know where I can find this info?
You'll need to use the webpack 1 branch of the loader:
https://github.com/webpack-contrib/sass-loader/tree/archive/webpack-1
As shown in the documentation:
module.exports = {
...
module: {
loaders: [
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
]
}
};
And then in your react app:
require("./file.scss")
In your npm install you'd do:
npm i -S npm install sass-loader#4.1.1
Related
I have created an npm package with the scoped name '#bpmg/mycomponent' with a single react component. I have published this to a local npm registry (verdaccio).
I have created a new react project to test this package, using create-react-app.
I have installed my npm package successfully and can import the component into my project.
However, webpack (from create-react-app scripts) complains about my imported file.
support for the experimental syntax 'jsx' isn't currently enabled
So I install react-app-rewired and try to override the webpack config to "include" this one node_module in the webpack bundler.
Here is what I have
/* config-overrides.js */
const path = require('path');
module.exports = {
webpack: function (config, env) {
config.module.rules= [
{
test: /\.(js|jsx)$/,
exclude: /node_modules\/(?!(#bpmg)\/).*/,
include: [
path.join(__dirname, 'src')
],
loader: 'babel-loader',
options: { presets: ['#babel/env', '#babel/preset-react'] },
}
];
return config;
}
}
This fails to run
ERROR in ./node_modules/#bpmg/myComponent/src/myComponentMainFile.js
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
Where it chokes on the first bit of jsx syntax it encounters.
Where am I going wrong here?
In trying to install react-datepicker, I came across the import of css through webpack. I cannot get this installed correctly.
Here is my webpack.config.js:
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{ test: /\.jsx?$/, exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
}
I installed css-loader with npm. I added the use call above that has style-loader and css-loader, but it failed when I went to load. Anyone have specific installation instructions for the import css into js?
The react-datepicker instructions are short and vague.
For the react community I just added, most of the date components have this style of import css from javascript file. I am not using create-react-app, I rolled my own, have you been able to get these imports to work in a roll your own webpack environment?
Thanks in advance.
I found the answer here. I basically just needed to make sure css-loader and style-loader were installed and add in the following webpack configurations.
As from the title, I don't know where to start configuring anything in order to be able to use .scss files for my components.
I know how to configure loaders in webpack.config.js, but in the boilerplate I have, there is no webpack.(dev|prod).config.js
I've read that I should create a .babelrc, but then I got lost.
Can anyone help me with this?
structure of my project:
structure folders of project
You'll need to install a few loaders with npm:
npm i style-loader css-loader sass-loader --save-dev
Then you'll need to add the loaders to the module section of your webpack config file:
module: {
loaders: [
// Sass
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
// CSS
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
}
I've started learning Backbone.js and I'm a little confused with setting up the project. How shoul I set up the Backbone.js environment with Webpack and npm? First, I did
$ npm init
$ npm i webpack --save-dev
$ npm i webpack-dev-server --save-dev
$ npm i backbone --save-dev
$ npm i jquery --save-dev
$ npm i babel-core
$ npm i babel-loader
$ npm i babel-preset-es2015
I had the following in my webpack.config.js
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
}
}
module.exports = config;
and in my main.js I had
import Backbone from 'backbone';
import $ from 'jquery';
but nothing worked. How should I make an initial setup for Backbone with ES6? Also, does Backbone support ES6, or it is rather outdated and deprecated for modern time?
I'd suggest you start here: https://github.com/jerrysu/backbone-webpack-example
There's nothing preventing you using Backbone with ES6, though you should read this: http://benmccormick.org/2015/04/07/es6-classes-and-backbone-js/
The first problem I see with your webpack configuration is that your loader is missing a test expression (https://webpack.js.org/configuration/)
I'm trying to build a project with webpack and react with this webpack config:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'babel-polyfill',
'./app/less/main.less',
'./app/main.js',
'webpack-dev-server/client?http://localhost:8080'
],
output: {
publicPath: '/',
filename: 'dist/main.js'
},
debug: true,
devtool: 'source-map',
module: {
loaders: [
{
test: /\.js$/,
include: path.join(__dirname, 'app'),
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.less$/,
loader: "style!css!autoprefixer!less"
},
]
}
};
I am sure I have the needed pm modules too and have webpack installed, however when running webpack I get:
Module build failed: ReferenceError: [BABEL] /Users/me/foo/app/main.js: Unknown option: foo/node_modules/react/react.js.Children
Any ideas?
Sorry I forgot to install babel-preset-react:
$ npm install babel-preset-react --save-dev
I just wanted to add that I got the error after I uninstalled an old npm module I wasn't using in my project anymore. Which was weird because I wasn't using it anywhere - how could uninstalling something that isn't used anywhere cause an error?
Turns out that one of that modules sub-dependencies had babel-preset-react, which I had missed installing to my own project when I started it. Thus, uninstalling that package also uninstalled the critical babel-preset-react!
For over a year, my react app could compile thanks to another package's sub-dependency...
So yes, installing babel-preset-react solved the issue for me.