postcss-loader: [2.0.5] `css-loader: modules` not working as needed after upgrade
css modules inside node_modules are working but css modules on my source are not added but loaded.
css is missed
require('babel-polyfill');
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const FlowtypePlugin = require('flowtype-loader/plugin');
const assetsPath = path.resolve(__dirname, '../static/dist');
const host = (process.env.HOST || 'localhost');
const port = (+process.env.PORT + 1) || 4001;
const rootPath = path.join(__dirname, './..');
const nodeModulesPath = path.join(rootPath, 'node_modules');
// Isomorfic Tools
// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
const WebpackIsomorphicToolsPlugin =
require('webpack-isomorphic-tools/plugin');
const webpackIsomorphicToolsPlugin =
new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
// Babel config update to for client
const babelrc = fs.readFileSync('./.babelrc');
let babelrcObject = {};
try {
babelrcObject = JSON.parse(babelrc);
} catch (err) {
console.error('==> ERROR: Error parsing your .babelrc.');
console.error(err);
}
const babelrcObjectDevelopment =
babelrcObject.env && babelrcObject.env.development || {};
// merge global and dev-only plugins
let combinedPlugins = babelrcObject.plugins || [];
combinedPlugins = combinedPlugins.concat(babelrcObjectDevelopment.plugins);
const babelLoaderQuery = Object.assign(
{},
babelrcObjectDevelopment,
babelrcObject,
{ plugins: combinedPlugins }
);
delete babelLoaderQuery.env;
// Since we use .babelrc for client and server, and we don't want HMR enabled
// on the server, we have to add the babel plugin react-transform-hmr manually
// here.
// make sure react-transform is enabled
babelLoaderQuery.plugins = babelLoaderQuery.plugins || [];
let reactTransform = null;
for (let i = 0; i < babelLoaderQuery.plugins.length; ++i) {
let plugin = babelLoaderQuery.plugins[i];
if (Array.isArray(plugin) && plugin[0] === 'react-transform') {
reactTransform = plugin;
}
}
babelLoaderQuery.presets =
babelLoaderQuery.presets.map(function (item) {
if (item === 'es2015') {
return ['es2015', { modules: false }];
}
return item;
});
if (!reactTransform) {
reactTransform = ['react-transform', {transforms: []}];
babelLoaderQuery.plugins.push(reactTransform);
}
if (!reactTransform[1] || !reactTransform[1].transforms) {
reactTransform[1] = Object.assign({}, reactTransform[1], {transforms: []});
}
module.exports = {
entry: {
vendor: require('./vendorList'),
main: [
'react-hot-loader/patch',
//activate HMR for React
'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
'./src/client.js'
//the entry point of our app
],
},
output: {
path: assetsPath,
filename: '[hash]-[id].js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: 'http://' + host + ':' + port + '/assets/',
},
context: path.resolve(__dirname, '..'),
devtool: 'inline-source-map',
performance: { hints: false },
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
'react-hot-loader/webpack',
'babel-loader?' + JSON.stringify(babelLoaderQuery),
'eslint-loader',
// 'flowtype-loader',
],
}, {
test: /\.json$/,
loader: 'json-loader',
}, {
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
localIdentName: '[local]___[hash:base64:5]',
importLoaders: 2,
modules: true,
}
},
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [
require('postcss-import')({
root: loader.resourcePath,
}),
require('postcss-mixins')(),
require('postcss-each')(),
require('postcss-cssnext')({
features: {
customProperties: {
variables: require('../src/theme/variables.js'),
}
}
}),
],
} ,
},
]
}, {
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader',
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream',
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/svg+xml',
}, {
test: webpackIsomorphicToolsPlugin.regular_expression('images'),
loader: 'url-loader?limit=10',
}],
},
resolve: {
modules: [
'src',
'node_modules'
],
extensions: ['.json', '.js', '.jsx', '*'],
},
plugins: [
// new FlowtypePlugin(),
new webpack.LoaderOptionsPlugin({
options: {
context: path.resolve(__dirname, '..'),
}
}),
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest'], // Specify the common bundle's name.
}),
new webpack.HotModuleReplacementPlugin(),
//activates HMR
new webpack.NamedModulesPlugin(),
//prints more readable module names in the browser console on HMR updates
//
new webpack.IgnorePlugin(/webpack-stats\.json$/),
new webpack.DefinePlugin({
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: true,
__DEVTOOLS__: true // <-------- DISABLE redux-devtools HERE
}),
webpackIsomorphicToolsPlugin.development()
],
};
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 34 (20 by maintainers)
@felixsanz yep create new issue and try to show what is wrong (screenshots, console, example of code and etc.). Don’t write here otherwise the problem may not be noticed.
Here is my test repo with react-toolbox: olegstepura/postcss-loader-test
The only change between two versions below is an edit in
package.json
:And run
npm i
inside test repo folder after edit.With version
1.3.3
:Big screen, everything is stacked good (click to see screenshot)
Small screen, animation is smooth (click to see gif)
With version
2.0.5
:Big screen, strange spacing between navbar and appbar (click to see screenshot)
Small screen (click to see gif and comments)