Code Monkey home page Code Monkey logo

Comments (14)

BANG88 avatar BANG88 commented on May 25, 2024 3

@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.

katopz avatar katopz commented on May 25, 2024 2

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.

burner03 avatar burner03 commented on May 25, 2024 1

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.

developit avatar developit commented on May 25, 2024 1

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.

katopz avatar katopz commented on May 25, 2024

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.

developit avatar developit commented on May 25, 2024

Ah yeah that seems like the issue. I don't have a Windows machine to test on!

from preact-boilerplate.

katopz avatar katopz commented on May 25, 2024

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.

developit avatar developit commented on May 25, 2024

Might be the include/exclude regular expressions.

from preact-boilerplate.

BANG88 avatar BANG88 commented on May 25, 2024

@developit any updates ?

from preact-boilerplate.

katopz avatar katopz commented on May 25, 2024

@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.

burner03 avatar burner03 commented on May 25, 2024

@developit

{
				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.

burner03 avatar burner03 commented on May 25, 2024

@BANG88 This fixes the issue on my Windows 7 system. Thank you!

from preact-boilerplate.

BANG88 avatar BANG88 commented on May 25, 2024

@wuvluv You are welcome. :)

from preact-boilerplate.

developit avatar developit commented on May 25, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.