I use webpack and i would like generate my CSS file with SASS.
So i've add css-loader and sass-loader. But, webpack don't create my CSS folder. My webpackconfig :
const webpack = require('webpack'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
entry: './js/app.js',
output: {
path: './public',
filename: 'app.bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-2']
}
},
{
test: /\.scss$/,
loaders: ExtractTextPlugin.extract(["style", "css", "sass"])
}
]
},
plugins: [
new ExtractTextPlugin('app.bundle.css'),
new BrowserSyncPlugin(
{
host: 'localhost',
port: 3000,
server: { baseDir: ['./'] }
}
)
]
}
Do you have any idea ?
Thank you !
You could use the style!css!sass loaders. Just install them using npm and set the config below in your webpack.config.
{
test: /\.scss$/,
loader: 'style!css!sass?sourceMap'
}
Your final webpack.config should look like this:
const webpack = require('webpack'),
ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './js/app.js',
output: {
path: './js',
filename: 'app.bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-2']
}
},
{
test: /\.scss$/,
loader: 'style!css!sass?sourceMap'
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
}
Now your CSS should be bundled properly.
plugins should be a root property, not a property of module.
const webpack = require('webpack'),
ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './js/app.js',
output: {
path: './js',
filename: 'app.bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-2']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css!sass')
}
]
},
plugins: [
new ExtractTextPlugin('app.bundle.css')
]
}
You have to import the scss file somewhere, like your index.js or App.js:
e.g. import './sass/main.scss';
Related
In App.js I wanted to import App.css file or any css file. import './App.css' is not working here and giving error " ERROR in ./src/shared/App.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 "
Directory Structure -
1. public
- bundle.js
2. src
- browser (folder) > index.js
- server (folder) > index.js
- server (folder) > App.js , App.css
This is my webpack.config.js file -
var path = require('path')
var webpack = require('webpack')
var nodeExternals = require('webpack-node-externals')
var combineLoaders = require('webpack-combine-loaders');
var browserConfig = {
entry: './src/browser/index.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
{ test: /\.(js)$/, exclude: /node_modules/, use: ['babel-loader']},
{
test: /\.css$/,
exclude: /node_modules/,
loader: combineLoaders([
{
loader: 'style-loader'
}, {
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
])
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx', '.css']
},
mode: 'production',
plugins: [
new webpack.DefinePlugin({
__isBrowser__: "true"
})
]
}
var serverConfig = {
entry: './src/server/index.js',
target: 'node',
externals: [nodeExternals()],
output: {
path: __dirname,
filename: 'server.js',
publicPath: '/'
},
mode: 'production',
module: {
rules: [
{ test: /\.(js)$/, exclude: /node_modules/, use: ['babel-loader']},
{
test: /\.css$/,
exclude: /node_modules/,
loader: combineLoaders([
{
loader: 'style-loader'
}, {
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
])
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx', '.css']
},
plugins: [
new webpack.DefinePlugin({
__isBrowser__: "false"
})
]
}
module.exports = [browserConfig, serverConfig]
To load CSS files in your ReactJS project, install the css-loader for ReactJS...
npm install --save-dev style-loader css-loader
Also, make sure to modify your webpack.config.js file, located in my project at: ./node_modules/webpack-dev-server/client/webpack.config.js. You'll need to add loaders, which will look something like...
module.exports = {
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loaders: 'babel', query: { presets: ['react', 'es2015', 'stage-1'] } },
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
...
}
Finally, make sure you have a resolution rule for CSS in webpack.config.js...
resolve: {
extensions: ['', '.js', '.css',...]
}
I'm currently messing around with https://github.com/sahat/megaboilerplate and trying to get it such that I can import css from within my components.
Here's my config:
const path = require('path');
const webpack = require('webpack');
var config = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./app/main'
],
output: {
path: path.join(__dirname, 'public', 'js'),
filename: 'bundle.js',
publicPath: '/js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
],
module: {
loaders: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
],
}, {
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
plugins: [
['react-transform', {
transforms: [
{
transform: 'react-transform-hmr',
imports: ['react'],
locals: ['module']
}, {
transform: 'react-transform-catch-errors',
imports: ['react', 'redbox-react']
}
]
}]
]
}
}
]
}
};
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
new webpack.optimize.UglifyJsPlugin({
compressor: {
screw_ie8: true,
warnings: false
}
})
);
}
module.exports = config;
As you can see from the original config:
https://github.com/sahat/megaboilerplate/blob/master/webpack.config.js
I've added:
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
],
But when I run the server, I get:
/megaboiler/node_modules/spectre.css/dist/spectre.min.css:1
(function (exports, require, module, __filename, __dirname) { /*! Spectre.css | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input
SyntaxError: Unexpected token {
What am I missing?
Your test: /\.css$/ is now.
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
],
Seems that you may miss some loaders which can handle your files correctly, remember each loader has it's limits what it can process.
use: [
'raw-loader',
'style-loader',
'css-loader',
'postcss-loader',
'resolve-url-loader',
]
I'm really disheartened, because I can't find any useful resource on the subject.
I merely want to watch my .css files, use post css' plugins to transform them and finally export them to my /public folder as I already do with my .jsx files
Here's my web pack configuration
const path = require('path');
const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: path.resolve('src/index.jsx'),
output: {
path: path.resolve('public'),
filename: 'bundle.js'
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
devServer: {
publicPath: "/",
contentBase: "./public"
},
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}, {
loader: 'postcss-loader',
options: {
plugins: function() {
return [require('lost'), require('postcss-cssnext'), require('postcss-import')]
}
}
}
]
})
}, {
test: /\.jsx?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
],
exclude: /(node_modules|bower_components)/
}
]
},
plugins: [new ExtractTextPlugin("main.css")]
}
I assume you are using webpack2
If you want your css file dumped out separately, you would need ExtractTextPlugin. Here is my css loader which works
I define the post css plugins right within the webpack config, because then it stays in one place. Hope this helps:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
...
...
module.exports = {
...
...
module: {
rules: [
...
...
{
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract(
{ fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
modules: true,
localIdentName:'[name]__[local]___[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
require('autoprefixer')
]
}
}
},
]
})
},
}
Maybe your plugins are incorrectly created.
Try
return [require('lost')(), require('postcss-cssnext')(), require('postcss-import')()]
(Note the () to invoke the plugin creation).
Also are you actually using import/require() to include your css? If not you should, no magic stuff will glob your css :)
Despite many searches on the Web, I couldn't find a working example of a webpack config that allows CSS bundle splitting (app.css and vendor.css, like Ember.js does). No problem for JavaScript though. Currently I have Normalize.css as a NPM package that I would like to move to vendor.css, instead of app.css.
Here is my file :
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
html: './app/index.html',
javascript: './app/app.js',
vendor: ['react', 'react-dom']
},
module: {
loaders: [
{ test: /\.html$/, loader: 'file?name=index.html' },
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css!sass!postcss') },
{ test: /\.js$/, exclude: /node_modules/, loaders: ['react-hot', 'babel?presets[]=es2015&presets[]=react'] },
{ test: require.resolve('react'), loader: 'expose?React' }
],
},
postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ],
plugins: [
new ExtractTextPlugin('app.css'),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
],
output: {
path: './dist',
filename: 'app.js'
},
devServer: {
port: 8000
}
}
Thanks in advance !
I am using the react-super-select component in a react/redux project that I'm working on.
That project currently uses webpack and style-loader to load my styling:
const path = require('path');
const webpack = require('webpack');
const poststylus = require('poststylus');
module.exports = {
entry: [
'webpack-hot-middleware/client',
'./src/client/index',
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/',
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
exclude: /node_modules/,
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
},
{
test: /\.styl$/,
loader: 'style-loader!css-loader?modules!stylus-loader',
}],
},
stylus: {
use: [
poststylus([ 'autoprefixer', 'rucksack-css' ]),
],
},
};
I am finding that this use of style-loader seems to be overriding the styling provided with react-super-select.
Is there a way to configure webpack so that it does not override the style for this component?
Ok, I figured out how to do this -- I created a wrapper component that loaded the css explicitly:
import React, { PropTypes, Component } from 'react';
import ReactSuperSelect from 'react-super-select';
import 'react-super-select/lib/react-super-select.css';
export default class Dropdown extends Component {
render() {
const { options, onChange, ...preferences } = this.props;
return (
<ReactSuperSelect placeholder={preferences.placeholder}
dataSource={options}
onChange={onChange}
searchable={preferences.searchable} />
);
}
}
Dropdown.propTypes = {
options: PropTypes.array.isRequired,
onChange: PropTypes.func.isRequired,
preferences: PropTypes.object.isRequired,
};
and then I added a line to load css in my webpack config:
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
exclude: /node_modules/,
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url?limit=10000&mimetype=application/font-woff',
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file',
},
{
test: /\.styl$/,
loader: 'style!css?modules!stylus',
},
{
test: /\.css$/,
loader: 'style!css',
}],
},