terence55 / themes-switch Goto Github PK

[email protected] dev-server C:\Users\extppg\Documents\Projects\audanet-fe\breclient
cross-env region=core NODE_ENV=dev ./node_modules/.bin/webpack-dev-server --config webpack.config.js

Themes generating started...
(node:27396) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
events.js:167
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 0.0.0.0:8181
at Server.setupListenHandle [as _listen2] (net.js:1286:14)
at listenInCluster (net.js:1334:12)
at doListen (net.js:1460:7)
at process._tickCallback (internal/process/next_tick.js:63:19)
at Function.Module.runMain (internal/modules/cjs/loader.js:744:11)
at startup (internal/bootstrap/node.js:285:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)
Emitted 'error' event at:
at emitErrorNT (net.js:1313:8)
at process._tickCallback (internal/process/next_tick.js:63:19)
[... lines matching original stack trace ...]
at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev-server: cross-env region=core NODE_ENV=dev ./node_modules/.bin/webpack-dev-server --config webpack.config.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev-server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I have tried this plugin, and it works fine to generate different theme chunks, while my project used Reat.lazy to split code into chunks, if you have any suggestion about how to use the plugin in this situation?

As my dark theme is based on a theme I wanted to mimic it's structure. But it was not possible to refer to other files, as theme generation fails when themeDir contains a sub directory, or when relative (../darkly/_variables.scss) files are included.

Has anyone tried this in a Vue application build with the vue-cli 3? I would like to give it a try. I think it is easy enough to get the Plugin working in the webpack config. I am using bundling so I guess I need to turn that off (somehow) for css/sass files?

In my project, I use CSS classnames as such:

import classes from './Button.module.less';

function Button({...rest}) {
    return <button className={classes.button} {...rest}/>;
}

configured on webpack as:

{
    test: /\.module\.less$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                hmr: isDevMode,
            },
        },
        {
            loader: 'css-loader',
            options: {
                modules: {
                    localIdentName: '[name]__[local]--[hash:base64:5]',
                },
            },
        },
        'less-loader',
    ],
},

And it seems themes-switch are not able to keep that generated classnames (by CSS Modules) when generating themes.

Is there any way to make it work?

I don't think it should be complicated; the localIdentName should be considered when reading the file content.

I tried to integrate this neat plugin in my build as it seems to solve the exact problem i am facing right now.

The project I am working on is a VueJs application that uses Zurb Foundation, which in turn uses SASS as CSS preprocessor.

Though my build pipeline for production runs under Linux, I am developing with Windows locally.

I faced the problem, that the .scss files created under "/temp" contained unescaped backslashes:

In "/temp/themes/light.scss":

$black: #222427;
$white: #FFFFFF;

@import '../../src\styles\app.scss';

Within SASS-files the path would either have needed to be escaped or changed to use the POSIX format.

The expected output would have been:

$black: #222427;
$white: #FFFFFF;

@import '../../src/styles/app.scss';

I will provide a pull request, fixing this problem.

The useStaticThemeName only toggles between a fixed name, or one with a randomly generated number.

Webpack bundles can use contenthash, e.g. filename: '[name].[contenthash].js' this has the advantage that the hash stays the same as long as the content is still the same. This prevents unnecessary cache misses when the app is rebuild, but the css didn't actually change.

Is it possible to set scss variables without !default directive? It looks bad and bit confusing (css or sass rules don't have "default" rule, it's some unnecessary artifact)

I tried to use this plugin in a project that does not use html-webpack-plugin at all, and I get this error in webpack because html-webpack-plugin is required, and since it's not listed in the dependencies, it does not get installed by npm.

Here is where it is required and used :

I saw it being listed in the peerDependencies, so I poked around the npm documentation and found this code exemple that might show a better way of handling such dependency :

try {
  var foo = require('foo')
} catch (er) {
  foo = null
}

// .. then later in your program ..

if (foo) {
  foo.doFooThings()
}

Thank you !

It looks like it tries to open the temp generated files. Every time I hot reload, I get this error message:

ERROR in ./temp/themes/dark.less
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open 'D:\dev\projects\my-project\client\temp\themes\dark.less'
    at runLoaders (D:\dev\projects\my-project\client\node_modules\webpack\lib\NormalModule.js:316:20)
    at D:\dev\projects\my-project\client\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at Array.<anonymous> (D:\dev\projects\my-project\client\node_modules\loader-runner\lib\LoaderRunner.js:203:19)
    at Storage.finished (D:\dev\projects\my-project\client\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at ReadFileContext.provider (D:\dev\projects\my-project\client\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9)
    at ReadFileContext.callback (D:\dev\projects\my-project\client\node_modules\graceful-fs\graceful-fs.js:115:16)
    at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:242:13)

It shows the error for every theme that exists, so this follows:

ERROR in ./temp/themes/light.less
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open 'D:\dev\projects\my-project\client\temp\themes\light.less'

I use latest webpack and Typescript.
Did someone notice it too?

Receive this error:

Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'moduleFilename'. These properties are valid:
   object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType? }

I wanted to add an optional dark-mode to https://gwc-experiment.appspot.com/ unfortunately I couldn't get it to work completely.

1. Problem if fails to pack when clearTemp: false is not set
2. Problem all themes are added to the header loading them unnecessarily
3. Problem Theme switching does not seem work.
4. Problem there are no Typescript type defs for the offered functions.

To reproduce checkout https://github.com/groovy-console/groovy-web-console/tree/theming go to ./frontend and run npm run serve-remote to see the generated app in action.

Would it be possible to add an option to ignore files that start with an underscore such as _variables.scss

When a rule already use resource, we cannot add an exclude property but we need to add resource.exclude

I'll try a change and send a PR

System：win10
Node：v12.16.2
Source file type：.scss
Package version：
"mini-css-extract-plugin": "^0.9.0",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11"

ThemesGeneratorPlugin.clearTemp
It will delete temp directory. You can call the method as needed, e.g. when you stop webpack-dev-server in development mode.

Do you have an example of how to do this?