so I started my app and Im trying to use CSS for my React Components, I included my css rules in the webpack file:
This is the file structure:
The error that I get is :
ERROR in ./client/src/related_items/styles/Card.css 1:0
Module parse failed: Unexpected token (1:0)
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
> .Card-Component {
| border: 1px solid black;
| }
# ./client/src/related_items/Card.jsx 2:0-27
# ./client/src/related_items/App.jsx 2:0-26 8:163-167
# ./client/src/App.jsx 26:0-51 78:43-55
# ./client/src/index.js 3:0-28 4:50-53
webpack 5.52.0 compiled with 1 error in 13 ms
webpack.config.js
const path = require('path');
const SRC_DIR = path.join(__dirname, 'client', 'src');
const OUT_DIR = path.join(__dirname, 'client', 'dist');
module.exports = {
mode: 'development',
entry: path.join(SRC_DIR, 'index.js'),
output: {
path: OUT_DIR,
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
]
},
resolve: {
extensions: ['.js', '.jsx']
},
};
Im simply trying to use CSS in a component:
Card Component
import React from 'react';
import './styles/Card.css';
const Card = () => {
return (
<div className="Card-Component">
<h1>This is a Card</h1>
</div>
)
}
export default Card;
This is my CSS:
.Card-Component {
border: 1px solid black;
}
This is my package.json
{
"name": "front-end-capstone",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"react-dev": "webpack -w",
"server-dev": "nodemon server/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/preset-env": "^7.15.4",
"#babel/preset-react": "^7.14.5",
"axios": "^0.21.4",
"babel-loader": "^8.2.2",
"babel-preset-es2015": "^6.24.1",
"chai": "^4.3.4",
"css-loader": "^6.2.0",
"express": "^4.17.1",
"http-proxy-middleware": "^2.0.1",
"jest": "^27.1.1",
"mocha": "^9.1.1",
"nodemon": "^2.0.12",
"path": "^0.12.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sass": "^1.39.0",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
"webpack": "^5.52.0",
"webpack-cli": "^4.8.0"
}
}
Just killed webpack and re run it again, thought that having in in watch mode would do it
Related
I recently updated my NodeJS version to 'v16.13.2' and ever since then my template I built is breaking when trying to bundle the scss and css. Everything else works just fine when building.
I'm aware that node-sass had been deprecated and I should use sass (dart-sass). However, when I run my build I get this error:
Module parse failed: C:\Users\...\src\styles\styles.scss Unexpected token (1:3)
You may need an appropriate loader to handle this file type.
| h1 {
| color: white;
| text-align: center;
# ./src/app.js 25:0-31
# multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/app.js
I'm trying to get basic css to work but the loader doesn't seem to recognize the code.
Here is my code
package.json:
"scripts": {
"build:dev": "webpack",
"build:prod": "webpack -p --env production",
"dev-server": "webpack-dev-server",
"test": "cross-env NODE_ENV=test jest --config=jest.config.json",
"start": "node server/server.js",
"heroku-postbuild": "yarn run build:prod"
},
"dependencies": {
"babel-cli": "6.24.1",
"babel-core": "6.25.0",
"babel-loader": "7.1.1",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-object-rest-spread": "6.23.0",
"babel-polyfill": "6.26.0",
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",
"css-loader": "^6.5.1",
"express": "4.15.4",
"extract-text-webpack-plugin": "3.0.0",
"firebase": "^8.9.1",
"history": "4.10.1",
"moment": "2.18.1",
"normalize.css": "7.0.0",
"numeral": "2.0.6",
"react": "^16.14.0",
"react-addons-shallow-compare": "15.6.0",
"react-dates": "12.7.0",
"react-dom": "^16.14.0",
"react-modal": "2.2.2",
"react-redux": "5.0.5",
"react-router-dom": "4.1.2",
"redux": "3.7.2",
"redux-mock-store": "1.2.3",
"redux-thunk": "2.2.0",
"sass": "^1.49.7",
"sass-loader": "7.3.1",
"style-loader": "0.18.2",
"uuid": "3.1.0",
"validator": "8.0.0",
"webpack": "3.1.0"
},
"devDependencies": {
"cross-env": "5.0.5",
"dotenv": "^14.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.6.1",
"jest": "20.0.4",
"raf": "^3.4.1",
"react-test-renderer": "^16.14.0",
"webpack-dev-server": "2.5.1"
}
webpack.cnfig.js:
return{
entry: ['babel-polyfill','./src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.s?css$/,
use: CSSExtract.extract({
use: [
{
loader: 'css-loader',
options:{
sourceMap: true
}
},
{
loader: 'sass-loader',
options:{
sourceMap: true
}
}
]
})
}
]
},
EDIT: So after much research, I have also figured out that 'extract-text-webpack-plugin' is also deprecated and the documentation suggests that I use 'mini-css-extract-plugin'. So, I read the documentation for that and applied it but still nothing is working. I just want my webpack to bundle my .js and .css in separate files . Right now all of it is being pushed into 'bundle.js' and it does not render any css.
EDIT 2: Here is my new webpack.config.js and it is working as I wanted:
webpack.config.js:
webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
if(process.env.NODE_ENV === 'test'){
require('dotenv').config({ path: '.env.test'})
}else if(process.env.NODE_ENV === 'development'){
require('dotenv').config({ path: '.env.development'})
}
module.exports = (env) => {
const isProd = env === 'production'
return{
entry: ['babel-polyfill','./src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.(css)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(s[ca]ss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
plugins:[
new MiniCssExtractPlugin({
filename:'styles.css'
}),
new webpack.DefinePlugin({
'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
'process.env.FIREBASE_MESSAGE_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGE_SENDER_ID),
'process.env.FIREBASE_APP_ID': JSON.stringify(process.env.FIREBASE_APP_ID)
})
],
devtool: isProd ? 'source-map' :'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
publicPath: '/dist'
}
}
}
Alright I finally have an answer for all of this. So I essentially had to update a lot of my webpack due to deprecated modules. I ended up using 'mini-css-extract-plugin' and found out how to set it up. If anyone is working on a project using Nodejs version 16 and up, try this for the webpack and see if it works. I'll post my results in the initial question.
I'm creating an app in react. Having webpack installed I'm trying to add some styling but it doesn't seem to work.
My app.js:
import React from 'react'
import ReactDOM from 'react-dom'
import IndecisionApp from './components/IndecisionApp'
import './styles/styles.css'
ReactDOM.render(<IndecisionApp />, document.getElementById('app'))
My webpack.config
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
style.css file
* {
color: red;
}
app.js and styles folder are in the same folder. Shouldn't this work?
Btw, I'm not getting any errors or anything.
EDIT
Error in terminal (new edit: fixed this error, but initial problem still not solved)
ERROR in ./src/styles/styles.css
Module parse failed: C:\Users\Jossif\Desktop\Projects\react-course-projects\indecision-app\r-08-04-refactor\src\styles\styles.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| * {
| color: red;
| }
# ./src/app.js 15:0-30
# multi (webpack)-dev-server/client?http://localhost:8081 ./src/app.js
My webpack.config file
const path = require('path')
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public')
}
}
My package.json file
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"author": "Andrew Mead",
"license": "MIT",
"scripts": {
"serve": "live-server public/",
"build": "webpack",
"dev-server": "webpack-dev-server"
},
"dependencies": {
"babel-cli": "6.24.1",
"babel-core": "6.25.0",
"babel-loader": "7.1.1",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",
"css-loader": "0.28.4",
"live-server": "^1.2.0",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-modal": "2.2.2",
"style-loader": "0.18.2",
"validator": "8.0.0",
"webpack": "3.1.0",
"webpack-dev-server": "2.5.1"
}
}
I have a strange problem:
I'm using Webpack (with Vue-CLI) + HMR.
When I try to change styles in the browser in DevTools, then my page itself changes the styles - it removes some of them (screenshots below).
I understand that the problem is in the Hot Reload Webpack, because some Vue-Components styles remain, and some are deleted. So I can not change the styles in the sidebar and I have to reload the page every time to get the styles back in place.
Below is added my package.json and webpack.base.conf.js.
Thank you in advance!
P.S. Also I use SASS with SASS-Loader.
package.json
{
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"bootstrap": "^4.0.0",
"desandro-classie": "^1.0.1",
"desandro-get-style-property": "^1.0.4",
"draggabilly": "^2.1.1",
"jquery": "^3.2.1",
"jquery-parallax.js": "^1.5.0",
"popper.js": "^1.12.9",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"imports-loader": "^0.7.1",
"modernizr-webpack-plugin": "^1.0.6",
"node-notifier": "^5.1.2",
"node-sass": "^4.7.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"sass-loader": "^6.0.6",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
webpack.base.conf.js
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const ModernizrWebpackPlugin = require('modernizr-webpack-plugin')
const webpack = require('webpack')
let modernizrConfig = {
"options": [
"prefixed",
// "prefixedCSS",
// "testStyles",
"testAllProps",
"testProp",
"html5shiv",
"domPrefixes"
]
}
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
loader: "imports-loader?this=>window"
}
]
},
plugins: [
new ModernizrWebpackPlugin(modernizrConfig),
new webpack.ProvidePlugin({
Draggabilly: 'draggabilly',
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
],
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
One way to fix this is setting sourceMap to false for the sass loaderOptions in vue.config.js:
css: {
loaderOptions: {
scss: {
sourceMap: false
}
}
}
I have the same problem with NUXT project. reinstall of sass-loader / sass in the last version was solve the problem.
Using webpack --watch, changes to .pcss (PostCSS) files are not picked up when within [src/components/Main/]. Changes to .js files are picked up fine as well as .pcss files in other directories. Because my web app is isomorphic, ExtractTextPlugin is used to squish all the CSS together and push it into a single file.
Full code on GitHub.
This is on macOS 10.12.X.
webpack.config.js:
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const babelPresetEnvExclude = require('./config/babel-preset-env.exclude')
const babelPluginRelay = ['relay', { schema: 'data/schema.graphqls', }]
const styleRules = {
test: /\.p?css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: { importLoaders: 1 },
},
'postcss-loader',
],
}),
}
const fileRules = {
test: /\.((pn|sv|jpe?)g|gif)$/,
use: ['file-loader'],
}
const server = {
target: 'node',
entry: './build/unbundled/server.js',
output: {
filename: 'server.js',
path: path.resolve(__dirname, 'build')
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader',
options: {
plugins: [babelPluginRelay],
},
}],
},
styleRules,
fileRules,
]
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
// Overwrites the same file created by the browser webpack config. A loader
// needs to be specified to take care of the import statements and it wont
// work without also outputting a file. There has to be a better way to
// handle this, but I want to focus on other parts for now.
// #todo: make this less bad.
new ExtractTextPlugin('public/main.css'),
]
}
const browser = {
target: 'web',
entry: './build/unbundled/browser.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build/public')
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['env', {
debug: true,
useBuiltIns: true,
targets: { browsers: ['last 2 versions'] },
exclude: babelPresetEnvExclude
}]
],
plugins: [babelPluginRelay],
},
}],
},
styleRules,
fileRules,
]
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
new ExtractTextPlugin('main.css'),
]
}
console.log('NODE_ENV', JSON.stringify(process.env.NODE_ENV || 'development'))
module.exports = [browser, server]
package.json:
{
"name": "rtm-owl",
"version": "1.0.0",
"main": "index.js",
"author": "boring#example.com",
"license": "MIT",
"scripts": {
"relay": "relay-compiler --src ./build/unbundled --schema data/schema.graphqls",
"build": "tsc --pretty && npm run relay && webpack --progress",
"debug": "npm run build && node --inspect build/server.js",
"debug-brk": "npm run build && node --inspect-brk build/server.js",
"start": "node build/server.js",
"watch": "concurrently --kill-others 'tsc --pretty --watch' 'relay-compiler --src ./build/unbundled --schema data/schema.graphqls --watch' 'webpack --watch' 'nodemon build/server.js'"
},
"devDependencies": {
"#types/chart.js": "^2.6.1",
"#types/debug": "^0.0.30",
"#types/express": "^4.0.36",
"#types/fs-extra": "^4.0.0",
"#types/isomorphic-fetch": "^0.0.34",
"#types/lodash": "^4.14.71",
"#types/morgan": "^1.7.32",
"#types/react": "^16.0.0",
"#types/react-chartjs-2": "^2.0.2",
"#types/react-dom": "^15.5.1",
"#types/react-redux": "^4.4.47",
"#types/serialize-javascript": "^1.3.1",
"autoprefixer": "^7.1.2",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-relay": "^1.1.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.6.0",
"concurrently": "^3.5.0",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"fs-extra": "^4.0.0",
"isomorphic-fetch": "^2.2.1",
"nodemon": "^1.11.0",
"postcss-css-variables": "^0.7.0",
"postcss-import": "^10.0.0",
"postcss-loader": "^2.0.6",
"postcss-nested": "^2.1.0",
"relay-compiler": "^1.1.0",
"relay-runtime": "^1.1.0",
"serialize-javascript": "^1.3.0",
"style-loader": "^0.18.2",
"typescript": "^2.4.1",
"webpack": "^3.0.0"
},
"dependencies": {
"chart.js": "^2.6.0",
"debug": "^2.6.8",
"express": "^4.15.3",
"farce": "^0.2.1",
"found": "^0.3.1",
"found-relay": "^0.3.0-alpha.4",
"lodash": "^4.17.4",
"morgan": "^1.8.2",
"react": "^15.6.1",
"react-chartjs-2": "^2.5.5",
"react-dom": "^15.6.1",
"react-redux": "^5.0.5",
"react-relay": "^1.0.0",
"redux": "^3.7.2"
}
}
I encountered similar behaviour, webpack --watch does not react to changes in css files on macOS 10.14. I used the basic style-loader and css-loader and require my css files like require('./style.css').
Solved by switching to nodemon. In my package.json the following setup runs webpack whenever js or css files become modified.
...
scripts: {
"build": "webpack",
"watchbuild": "nodemon --watch ./ --ext js,css --ignore dist --exec \"npm run build\"",
...
},
devDependencies: {
"nodemon": "^2.0.4",
"webpack": "^4.39.3",
...
}
...
The setup can be easily customized to watch more file types and to execute a series of commands. For example nodemon --watch ./ --ext js,ejs,css,pcss --ignore dist --exec 'npm run lint && npm run build' will also watch ejs templates and pcss styles and run linter before build.
Note that I had to ignore my build directory dist to prevent infinite build loop. Note also \" instead of ' to provide compatibility between macOS and Windows.
I'm trying to enable hot style-loader in Webpack but I can not find the right configuration for it. Here's my webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const buildPath = path.resolve(__dirname, 'build');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const TransferWebpackPlugin = require('transfer-webpack-plugin');
const config = {
entry: [
'webpack/hot/dev-server',
'webpack/hot/only-dev-server',
path.join(__dirname, '/src/app/app.js'),
],
resolve: {
extensions: ["", ".js"],
},
devServer: {
contentBase: 'src/www',
devtool: 'eval',
hot: true,
inline: true,
port: 3232,
host: '0.0.0.0',
},
devtool: 'eval',
output: {
path: buildPath,
filename: 'app.js',
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new TransferWebpackPlugin(
[{ from: 'www' }],
path.resolve(__dirname, "src")
),
],
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot', 'babel-loader'],
exclude: [nodeModulesPath],
},
{
test: /\.css$/,
loader: "style!css",
},
],
},
eslint: {
configFile: '.eslintrc',
},
};
module.exports = config;
And my package.js file:
{
"name": "test-material-ui",
"version": "0.0.0-beta.1",
"description": "Sample project that uses material-ui",
"scripts": {
"start": "webpack-dev-server --config webpack.config.js --progress --inline --colors",
"build": "webpack -p --define process.env.NODE_ENV='\"production\"' --config webpack-production.config.js --progress --colors",
"lint": "eslint src && echo \"eslint: no lint errors\""
},
"private": true,
"devDependencies": {
"babel-core": "^6.3.26",
"babel-eslint": "^6.0.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"copy-webpack-plugin": "^2.1.3",
"css-loader": "^0.23.1",
"eslint": "^2.5.1",
"eslint-plugin-react": "^4.0.0",
"html-webpack-plugin": "^2.7.2",
"react-hot-loader": "^1.3.0",
"style-loader": "^0.13.1",
"transfer-webpack-plugin": "^0.1.4",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"flexboxgrid": "^6.3.0",
"material-ui": "^0.15.0-beta.1",
"react": "^15.0.1",
"react-addons-css-transition-group": "^15.0.1",
"react-dom": "^15.0.1",
"react-redux": "^4.4.5",
"react-tap-event-plugin": "^1.0.0",
"redux": "^3.4.0"
}
}
But no matter how I configure it, I can not get the hot sync working (for .css, for .js files it works just fine)! Can someone please show me the right way to do so?
Make sure that you require the css in Javascript.
Here's a link to the documentation that explains it: https://webpack.github.io/docs/stylesheets.html