I am using webpack with ReactJS and trying to figure out how to using normalize.css after npm installing it (https://necolas.github.io/normalize.css/).
Is the normalize.css applied right away after npm installing it? How would I make edits to it if I wanted to?
You can use the npm-installed normalize.css in the following way with React:
import React from 'react';
import ReactDOM from 'react-dom';
import 'normalize.css'; // Note this
const root = document.getElementById('root');
ReactDOM.render(<h1>Hello, World!</h1>, root);
The result will be:
Notice that the text has been styled by normalize.css.
To get it working, you need something similar to the following setup:
1) Add the Javascript from above to index.js
2) Add normalize.css (and friends) to package.json:
{
"dependencies": {
"normalize.css": "^5.0.0",
"react": "^16.3.2",
"react-dom": "^16.3.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"style-loader": "^0.21.0",
"webpack-dev-server": "^3.1.4",
"webpack": "^4.8.3"
}
}
3) Use the correct loaders in webpack.config.js:
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
options: { presets: ['env', 'react'] }
},
{
test: /\.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
}
]
}
};
4) Add an index.html file to see the results:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="root"></div>
<script src="main.js"></script>
</body>
</html>
4) Install everything
npm install
5) Start the Webpack devserver:
./node_modules/.bin/webpack-dev-server --open
NOTE: I am using version 5.0.0 of normalize.css. If you use version 6.0.0 or higher, the font will be different. All the opinionated rules were removed from normalize.css in that version.
Update 17/5/2018: Updated to use Webpack 4 and React 16.
Adding: If you are using WebPack 4 and you cannot import normalize.less, try normalize.css.
#import "../node_modules/normalize.css/normalize.css";
And my rules:
module: {
rules: [{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,
"css-loader"
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"less-loader"
]
}
]
};
in index.css:
#import "~normalize.css/normalize.css";
Once you import or require it will be included by Webpack unless you set it not to. For example:
Note: I’m using Webpack 2.
module: {
rules: [ // from 'loaders' to 'rules'
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.sass$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: ['style-loader','sass-loader']
})
}
]
}
The exclude property will take care of that.
Example:
// public/assets/style.scss
#import 'substyle1';
#import 'substyle1';
body {
background-color: red;
}
// src/index.js -> entry file
import '../public/assets/style.scss';
// Webpack will know that you are importing your SCSS / SASS file
Hope this helps.
First, install or download normalize.css from GitHub.I would recommend download it.Then, There are then 2 main ways to make use of it.
Approach 1: use normalize.css as a starting point for your own project’s base CSS, customising the values to match the design’s requirements.
Approach 2: include normalize.css untouched and build upon it, overriding the defaults later in your CSS if necessary.
i.e Just put these downloaded files into the project folder and add link to it by link tag
link rel="stylesheet" type="text/css" href="normalize.css"
NOTE href content should point to the folder where normalize is stored.
Related
So I'm trying to use styles within a vuejs single file component. I've had this working before within a node app, but this is with a python/flask back end. (Not that I think it should matter). Vue renders the component correctly, and everything seems to be fine, but it's completely ignoring my style tags.
Here's my test.vue:
<template>
<div>
<span class="foobar">Hello {{ foo }}</span>
</div>
</template>
<script>
let my_component = {
data: function () {
return {
foo: "world"
}},
}
export default my_component
</script>
<style scoped>
.foobar {
color: red;
}
</style>
Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test SFC Page</title>
</head>
<body>
<div id="test_component"></div>
<script src="/static/js/test.js"></script>
</body>
</html>
The contents of test.js:
import Vue from 'vue'
import TestComponent from './test.vue'
new Vue({
el: "#test_component",
render: h => h(TestComponent),
})
And my webpack config is very very simple. I basically used the same one that I used with my node/expressjs site because that worked, and webpack makes my head hurt.
const {VueLoaderPlugin} = require('vue-loader');
const config = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader',
],
},
]
},
plugins: [
new VueLoaderPlugin(),
],
}
module.exports = config
But obviously I'm doing something wrong. After googling around (and spending significant time on stack overflow), it seems like it's implied that webpack will create a separate css file for this that I then have to include, but no one seems to talk about how you make it do that, and I couldn't find that in my already-working node/express app, so maybe it doesn't always do that?
When the vue loader encounters a style section in a vue SFC, what does it actually do with those styles? Does it somehow inject them via javascript into the page itself?
Oh, and I'm using this command to run the build:
npx webpack --display-error-details --entry ./static/test/test.js --config ./scripts/webpack.config.js -o ./build/site/static/js/test.js --mode=development
Last piece of info - Something's definitely working partially correctly, because my final HTML output is containing the extra data tag that scoped puts in there. According to chrome's inspector - the final HTML looks like this:
<div data-v-3d196e1c>
<span data-v-3d196e1c class="foobar">Hello world</span>
</div>
And finally my package.json:
"name": "my_app",
"version": "1.0.0",
"description": "Description Goes Here",
"main": "app.js",
"dependencies": {
"axios": "^0.20.0",
"vue": "^2.6.12",
"vue-style-loader": "^4.1.2",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"cross-env": "^7.0.2",
"css-loader": "^4.3.0",
"html-webpack-plugin": "^4.4.1",
"vue-loader": "^15.9.3",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+ssh://git#gitlab.com/raphael_disanto/rpg.git"
},
"author": "RDSK",
"license": "ISC",
"bugs": {
"url": "https://gitlab.com/raphael_disanto/rpg/issues"
},
"homepage": "https://gitlab.com/raphael_disanto/rpg#readme"
}
So I'm totally lost. I don't know if I'm getting it wrong with webpack, or with vue, or somewhere in between! It's frustrating because I have this working on a different site, and I didn't think I did anything different this time...
I had this exact same problem, and changing
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader',
],
},
to
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
fixed it.
you should use Stephen's recommendation, but be sure to add
npm install style-loader
Then
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
}, ```
I run a cordova / Vue.js app with webpack
in my package.json :
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0"
...
}
in my webpack.config file :
const CONFIG = {
entry: {
app: ["babel-polyfill", path.join(PATHS.SRC_JS, 'app.js')],
},
output: {
path: PATHS.DIST,
//filename: 'app.bundle.js'
filename: './js/[name].js' //
},
module: {
rules: [
...
{
test: /\.js$/,
exclude: /node_modules\/(?!(swiper)\/).*/,
use: [
{
loader: 'eslint-loader',
options: {
emitWarning: true,
noConsole: 0
}
},
{
loader: 'babel-loader',
options: {
presets: [ 'env']
}
}
]
},
//.VUE FILES
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
};
module.exports = CONFIG;
and in my main app.js file,
if i write
console.log('app.js')
import style from '../css/sass/main.scss';
import config from '../assets/config.json';
and then i run webpack and cordova compilation, with output on ipad mini, it works, i have 'app.js' writed on console.
But if i add an import to js file (any file) :
import style from '../css/sass/main.scss';
import Preloader from './components/preloader-component.js';
import config from '../assets/config.json';
on ipad console i have an error :
SyntaxError : Unexpected token ')' in app.js:1
When building app with xcode on ios simulator, it works, but not on ipad (ios 9.3.5).
Need help !
Thanks
RESOLVED
Finally the problem was that Babel did not transpile ES6 correctly, so Safari on iOS would not read the code...
I simply put babel options in a .babelrc file, in place of in the webpack config file..and it works !!
Mysterious...
If someone has the same problem..
I recently upgraded from Webpack 3 to 4. It's now throwing an error:
Module parse failed: Unexpected character '#' You may need an
appropriate loader to handle this file type. | #import
'./scss/variables.scss'; | | * { # ./src/index.js 1:0-22
In my styles.scss file, I am doing the following:
#import 'scss/variables.scss';
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
In my index.js file, I am only doing the following:
import './style.scss';
In my webpack.dev.js, all I changed was an addition of mode: 'development':
const StyleLintPlugin = require('stylelint-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const Dotenv = require('dotenv-webpack');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'public/bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: ['babel-loader', 'eslint-loader']
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
}
]
},
plugins: [
new StyleLintPlugin({
configFile: '.stylelintrc',
context: 'src',
files: '**/*.scss',
failOnError: false,
quiet: false,
syntax: 'scss'
}),
new ExtractTextPlugin('public/style.css'),
new Dotenv()
]
};
I don't know what change from Webpack 3 to 4 has caused this error.
The issue I'm having is very similar to the issue posted here: Webpack 4 Module parse failed: Unexpected character '#' (1:0)
I have been through all related stackoverflow questions and none of them helped.
Here are the relevant dependencies in my package.json:
"babel-loader": "^7.1.4",
"css-loader": "^0.28.11",
"eslint-loader": "^1.9.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"node-sass": "^4.9.0",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"stylelint-webpack-plugin": "^0.10.5",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.4"
Here are the relevant scripts in my package.json file, for reference in the comments:
"scripts": {
"watch": "./node_modules/.bin/webpack --mode development --watch --progress",
"build": "./node_modules/.bin/webpack --mode production"
},
The problem was the script I was using to run Webpack did not specify the config file. This is what it should look like:
"scripts": {
"watch": "./node_modules/.bin/webpack --watch --config webpack.dev.js",
},
I believe this was generating the #import problem because it was not loading the css-loader as without specifying the config file like above, it uses a default Webpack development config which does not include the css-loader.
As I mentioned in a comment on your question there's an open issue with Webpack 4 compatibility: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701
A fix for now is to install the alpha version of the library. I've done a small setup just now to test this and it works with webpack 4.
Install the alpha version npm i -D extract-text-webpack-plugin#next --save. Then install css-loader, sass-loader and node-sass.
Then in the webpack config file:
const ExtractTextPlugin = require('extract-text-webpack-plugin');
...
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader'
},
exclude: /node_modules/,
include: path.join(__dirname, 'src')
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
}
]
},
plugins: [
new ExtractTextPlugin('bundle.css'),
]
This correctly worked for me, and also concatenated multiple scss files that were using #import statements.
In package.json it should look like
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"webpack": "^4.8.3"
Edit: Just as a side note, apparently mini-css-extract-plugin works fine with webpack 4.
This worked for me: Replace your webpack styling config to the below code
module: {
rules: [
{
test: /\.(css|sass|scss)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
}
]
}
I hope this resolves your issue thanks
I'm making an app on react-redux. I'm using webpack for bundling and babel for transpiling. When I am try to use arrow function in my code. It gives me error as :
Module build failed: SyntaxError: Unexpected token (34:15)
};
> handleSubmit = (event) => {
^
event.preventDefault();
this.props.dispatch(actions.addTodo(this.state.inputText));
My webpack configuration file looks like as follows :
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client',
'./client/client.js'
],
output: {
path: require('path').resolve('./dist'),
filename: 'bundle.js',
publicPath: '/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'react-hmre']
}
}
]
}
};
and I'm using following babel packages in my package.json :
"babel-cli": "^6.6.5",
"babel-core": "^6.4.5",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.1.1",
What would have gone wrong?
Stab in the dark, is this function inside a class? Arrow functions that are members of a class are not included in ES2015 (or 2016). If you want to do something like:
class Foo {
bar = (baz) => {
console.log(baz);
}
}
You'll need to include babel-transform-class-properties.
In your example, you'll need to:
npm install --save-dev babel-plugin-transform-class-properties
and change your loader to
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'react-hmre'],
plugins: ['transform-class-properties']
}
}
Also if you want to get used to new babel show, you can use babel.config.js file instead of .babelrc. The idea is like something like webpack.config.js file , but for babel configurations. It is been used like below:
module.exports = {
presets: [ "#babel/preset-env", "#babel/preset-react" ],
plugins: [ "#babel/plugin-transform-arrow-functions", "#babel/plugin-proposal-class-properties" ]
}
Make sure to install all of those plugins to compile successfully. I should say that babel itself just recommended to do all of these stuff in .babelrc file to every one. But you know, we are not every one.
This is exactly what worked for me:
1) Install babel-plugin-transform-class-properties:
sudo npm install --save-dev babel-plugin-transform-class-properties
2) Add options (not query) to your rules:
module.exports = {
..........
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
presets: ['env', 'react', 'es2015'],
plugins: ['transform-class-properties']
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
..........
};
First you needed to edit the .babelrc file to
{
"presets": ["react", ["es2016"]],
"plugins": [
"babel-plugin-transform-class-properties"
]
}
Second npm install babel-plugin-transform-class-properties and babel-preset-es2016
In my application, this issue was caused by less-loader mistakenly added as dependent package instead of devDependency.
Moving less-loader from dependencies to devDependencies in package.json file resolved the issue.
I am having difficulty in getting CSS loading using css-loader on my JSX files. I was following the example from:
https://christianalfoni.github.io/react-webpack-cookbook/Loading-CSS.html
This is my JSX
import React from 'react';
import ReactDOM from 'react-dom';
import styles from './styles.css';
class Hello extends React.Component {
render() {
return <div>Hello world!</div>
}
}
var el = document.getElementById('content')
var data = JSON.parse(el.getAttribute('data-attr'))
ReactDOM.render(<Hello data={data} />, el);`
This is my package.json
"devDependencies": {
"babel-core": "^6.3.26",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"css-loader": "^0.23.1",
"exports-loader": "~0.6.2",
"expose-loader": "~0.6.0",
"grunt": "^0.4.5",
"grunt-babel": "^6.0.0",
"grunt-cli": "^0.1.13",
"grunt-contrib-watch": "^0.6.1",
"grunt-webpack": "^1.0.11",
"history": "^1.17.0",
"imports-loader": "~0.6.3",
"jquery": "^2.1.4",
"lodash": "~3.0.0",
"react": "^0.14.5",
"react-dom": "^0.14.5",
"react-router": "^1.0.3",
"style-loader": "^0.13.0",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"chunk-manifest-webpack-plugin": "0.0.1",
"grunt-react": "^0.12.3"
}
This is my Webpack.config.js
var path = require('path');
var webpack = require('webpack');
var config = module.exports = {
// the base path which will be used to resolve entry points
context: __dirname,
// the main entry point for our application's frontend JS
entry: './app/frontend/javascripts/entry.js',
stats: {
// Configure the console output
colors: true,
modules: true,
reasons: true
},
progress: true,
keepalive: true,
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader', // 'babel-loader' is also a legal name to reference
query: { presets: ['es2015', 'react'] }
},
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
output: {
// this is our app/assets/javascripts directory, which is part of the Sprockets pipeline
path: path.join(__dirname, 'app', 'assets', 'javascripts'),
// the filename of the compiled bundle, e.g. app/assets/javascripts/bundle.js
filename: 'bundle.js',
// if the webpack code-splitting feature is enabled, this is the path it'll use to download bundles
publicPath: '/assets',
devtoolModuleFilenameTemplate: '[resourcePath]',
devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]',
},
resolve: {
// tell webpack which extensions to auto search when it resolves modules. With this,
// you'll be able to do `require('./utils')` instead of `require('./utils.js')`
extensions: ['', '.js'],
// by default, webpack will search in `web_modules` and `node_modules`. Because we're using
// Bower, we want it to look in there too
modulesDirectories: [ 'node_modules', 'bower_components' ],
},
plugins: [
// we need this plugin to teach webpack how to find module entry points for bower files,
// as these may not have a package.json file
new webpack.ResolverPlugin([
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('.bower.json', ['main'])
]),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
//new webpack.optimize.CommonsChunkPlugin('common-bundle.js'),
//new webpack.optimize.CommonsChunkPlugin('public-bundle.js')
]
};
This is my styles.css
#div {
background-color: red;
}
The output I get from running my grunt task to run 'webpack' attached:
You can see where it says the build failed for the CSS.
cjs require fbjs/lib/mapObject [154] ./~/react/lib/ReactDOMFactories.js 18:16-45
[157] ./~/react/lib/onlyChild.js 1.21 kB {0} [built]
cjs require ./onlyChild [153] ./~/react/lib/ReactIsomorphic.js 24:16-38
[158] ./~/react/lib/deprecated.js 1.77 kB {0} [built]
cjs require ./deprecated [3] ./~/react/lib/React.js 19:17-40
[159] ./~/react-dom/index.js 63 bytes {0} [built]
cjs require react-dom [0] ./app/frontend/javascripts/entry.js 11:16-36
ERROR in ./app/frontend/javascripts/styles.css
Module parse failed: /Users/Booboo/Projects/Xeon/app/frontend/javascripts/styles.css Line 1: Unexpected token {
You may need an appropriate loader to handle this file type.
| div {
| background-color: red;
| }
# ./app/frontend/javascripts/entry.js 5:0-23
Warning: Task "webpack:dev" failed. Use --force to continue.
Aborted due to warnings.
Booboo$ grunt react && grunt webpack && grunt watch
I encounter this problem too.
But in my case, I found my loader was written as
{test: '/\.css$/', loader: 'style!css'}
which should be correctly written as
{test: /\.css$/, loader: 'style!css'}
note the '' around the /.css$/
I wise this would be helpful for you.
When you say
import styles from './styles.css';
you're trying to import a module that's not being exported as a module.
Try
import './styles.css';
instead to make it a simple file import.