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.
Related
I have created a new react app using npx create-react-app and now I want to integrate a webpack.config.js file. I know I don't have to but it is a necessary step for an assignment.
I have tried many tutorials an articles but I can't seem to make it work. All I need is to include all the css related loaders (sass, css etc) and babel.
This is my webpack.config.js file:
const path = require('path');
module.exports = {
mode: "development",
entry: path.join(__dirname,'./src/index.js'),
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader"
]
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx"]
},
output: {
path: path.join(__dirname,'public'),
filename: 'bundle.js'
},
devServer: {
contentBase: path.join(__dirname,'public')
}
};
And I get this error:
ERROR in ./src/index.js 7:16
Module parse failed: Unexpected token (7:16)
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
| import * as serviceWorker from './serviceWorker';
|
> ReactDOM.render(<App />, document.getElementById('root'));
|
| // If you want your app to work offline and load faster, you can change
There're some alternatives that can override webpack config without ejecting the CRA project:
Alternatives You can try customize-cra for a set of CRA 2.0 compatible
rewirers, or any of the alternative projects and forks that aim to
support 2.0:
Rescripts, an alternative framework for extending CRA configurations
(supports 2.0+).
react-scripts-rewired for a fork of this project that
aims to support CRA 2.0
craco
add config-overrides.js in the route and add your webpack changes as:
const { addWebpackModuleRule } = require('customize-cra')
module.exports = {
webpack: override(
addWebpackModuleRule({
issuer: {
test: /\.sass?$/,
},
loader: 'file-loader',
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
}))
}
Answering this just because it kills me to see 10 page Medium articles as an answer when it can be answered in 1 sentence.
Enter your project dir and run npm run eject
This will extract all of the configuration files for you to edit, including webpack.config.js, to a folder called "config". Enter config/webpack.config.js, find the "return" statement, and inside there is a "resolve" configuration option. Add the following to that object:
symlinks: false
Boom. Saved you a stupidly long Medium article.
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'm new to webpack and I can't seem to find a way to serve the Apple Universal Links file under / using webpack.
Could you please advise how to get /apple-app-site-association working?
if you want to serve apple-app-site-association through webpack you could add loader
and add import for this file in main.js for example
{
test: /apple-app-site-association/,
exclude: /node_modules/,
loader: [
{
loader:'file-loader',
options: {
name: '/[name]',
}
}]
}
I am trying to implement SCSS in my project. I have ran the npm command to install the loader "npm install sass-loader node-sass --save-dev". I have created a scss file. but the problem is it is not working. i tried multiple configurations to make it runable but no luck. below are my webpack configuration. please advice,
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}]
Did you configure your loaders correctly? Cant at least see any css/scss loaders in your provided code? https://github.com/webpack-contrib/sass-loader
UPDATE::
Add ExtractTextPlugin into your config. What this does is, it moves all the require("style.css")s in entry chunks into a separate single CSS file. So your styles are no longer inlined into the JS bundle, but separate in a CSS bundle file (styles.css) https://github.com/webpack-contrib/extract-text-webpack-plugin
Include the following into your webpack.config file.
// webpack.config.js
import ExtractTextPlugin from 'extract-text-webpack-plugin'
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style',
loader: [
'css',
'postcss',
{
loader: 'sass',
query: {
sourceMap: false,
}
}
],
})
}
and import your .scss files ::
import 'scss/myfile.scss'
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