Comments (14)
@katopz @wuvluv See #82 ,It should works on both Windows and Mac,if it doesn't please let me know.Thank you.
from preact-boilerplate.
This should do it
{
test: /\.(less|css)$/,
include: /src\/components\//,
loader: ExtractTextPlugin.extract('style?singleton', [
'css?sourceMap=' + CSS_MAPS + '&modules&importLoaders=1&localIdentName=[local]' + (process.env.CSS_MODULES_IDENT || '_[hash:base64:5]') + '}',
'postcss',
'less?sourceMap=' + CSS_MAPS
].join('!'))
},
{
test: /\.(less|css)$/,
exclude: /src\/components\//,
loader: ExtractTextPlugin.extract('style?singleton', [
'css?sourceMap=' + CSS_MAPS,
'postcss',
'less?sourceMap=' + CSS_MAPS
].join('!'))
},
Working fine on my Mac ATM, I'll test tmr and let you know. :)
from preact-boilerplate.
Can confirm this is happening on my Windows 7 system.
After snooping around this seems to be a core issue with css-loader.
webpack-contrib/css-loader#180
webpack-contrib/css-loader#64
It may be due to how paths are read on windows systems by css-loader.
edit: another example added that I just found.
from preact-boilerplate.
Thanks guys, you're right this is something pretty difficult for me to test. I had a thought though: what about removing the localIdentName
parameter entirely? The default is pretty close to the value it is being manually set to, and that might be safer.
from preact-boilerplate.
Not sure it related to this line https://github.com/developit/preact-boilerplate/blob/master/webpack.config.babel.js#L54
Maybe ${process.env.CSS_MODULES_IDENT...
is not process via WIndows What to expect for it value btw? also ${CSS_MAPS}
should be broken to I think.
from preact-boilerplate.
Ah yeah that seems like the issue. I don't have a Windows machine to test on!
from preact-boilerplate.
Ah something completely wrong even fixed value didn't seem to made it
{
test: /\.(less|css)$/,
include: /src\/components\//,
loader: ExtractTextPlugin.extract('style?singleton', [
'css?sourceMap=true&modules&importLoaders=1&localIdentName=[local]_[hash:base64:5]}',
'postcss',
'less?sourceMap=true'
].join('!'))
},
{
test: /\.(less|css)$/,
exclude: /src\/components\//,
loader: ExtractTextPlugin.extract('style?singleton', [
'css?sourceMap=true',
'postcss',
'less?sourceMap=true'
].join('!'))
},
I think I need other Windows to confirm this.
from preact-boilerplate.
Might be the include/exclude regular expressions.
from preact-boilerplate.
@developit any updates ?
from preact-boilerplate.
@developit didn't have Windows to test tho, we should help him out.
Let's start with trying to find working one first.
I think many React boilerplate did have nearly same webpack config and it did working.
Can you guys help finding closet working one (but in React) so we can start to scope the problems down?
Cheers
from preact-boilerplate.
{
test: /\.(less|css)$/,
include: /src\/components\//,
loader: ExtractTextPlugin.extract('style?singleton', [
`css?sourceMap=${CSS_MAPS}&modules&importLoaders=1`,
'postcss',
`less?sourceMap=${CSS_MAPS}`
].join('!'))
},
{
test: /\.(less|css)$/,
exclude: /src\/components\//,
loader: ExtractTextPlugin.extract('style?singleton', [
`css?sourceMap=${CSS_MAPS}`,
`postcss`,
`less?sourceMap=${CSS_MAPS}`
].join('!'))
},
Same result with these settings. Let me know any other settings you may want to try.
@katopz One I have personally seen to generate the css-modules classes correctly is: https://github.com/MoOx/phenomic
Although it uses react, as you specified. Unfortunately i'm very green to webpack but I am willing to test anything you guys might think could fix the issue at hand.
Here's the excerpt from Phenomics webpack.config for .css -> css modules. Excuse my tabbing (or lack there-of, just pasted from notepad++)
{
test: /\.css$/,
exclude: /\.global\.css$/,
include: path.resolve(__dirname, "src"),
// webpack 1
loader: ExtractTextPlugin.extract(
"style-loader",
[ `css-loader?modules&localIdentName=${
config.production
? "[hash:base64:5]"
: "[path][name]--[local]--[hash:base64:5]"
}`,
"postcss-loader",
].join("!"),
),
Thanks for your work on this guys, I appreciate it greatly.
from preact-boilerplate.
@BANG88 This fixes the issue on my Windows 7 system. Thank you!
from preact-boilerplate.
@wuvluv You are welcome. :)
from preact-boilerplate.
I'll see about checking this on mac today. I think it might actually have been the regex matching against src/components
that broke it!
from preact-boilerplate.
Related Issues (20)
- Help with config? HOT 4
- An in-range update of script-ext-html-webpack-plugin is breaking the build 🚨 HOT 1
- An in-range update of eslint-plugin-react is breaking the build 🚨 HOT 2
- An in-range update of copy-webpack-plugin is breaking the build 🚨 HOT 2
- An in-range update of promise-polyfill is breaking the build 🚨 HOT 1
- await needed in router tests (app.test.js)? HOT 4
- An in-range update of css-loader is breaking the build 🚨 HOT 3
- An in-range update of serve is breaking the build 🚨 HOT 6
- An in-range update of postcss-loader is breaking the build 🚨 HOT 1
- Example of SW integration HOT 3
- Static HTML files? question HOT 1
- An in-range update of preact is breaking the build 🚨 HOT 2
- An in-range update of preact-router is breaking the build 🚨 HOT 1
- An in-range update of serve is breaking the build 🚨 HOT 1
- dependency bugs HOT 3
- requestAnimationFrame for HMR ? HOT 2
- unexpected token { HOT 1
- nrp run dev does not show latest changes HOT 1
- BrowserslistError: Unknown browser query `dead`
- Error when I try to install
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from preact-boilerplate.