I am trying to setup semantic ui react using the steps given https://react.semantic-ui.com/theming. But i don't know what is going wrong here.
/craco.config.js
module.exports = {
plugins: [{ plugin: require('#semantic-ui-react/craco-less') }],
}
/src/semantic-ui/theme.config
....
/*******************************
Folders
*******************************/
/* Path to theme packages */
#themesFolder : 'themes';
#siteFolder : '../../src/semantic-ui/site';
#import (multiple) "~semantic-ui-less/theme.less";
#fontPath : '../../../themes/#{theme}/assets/fonts';
/* Path to site override folder */
#siteFolder : 'site';
....
Error:
#import (multiple) "theme.less";
^ Can't resolve in <path>
Here is a 2021 update to semantic-ui theming & site styling configuration using create-react-app (CRA) setup (works with react-scripts version 4.0.3)
In the project root my craco.config.js
module.exports = {
plugins: [
{
plugin: require("#semantic-ui-react/craco-less"),
options: {
lessLoaderOptions: {
lessOptions: {
math: "always",
javascriptEnabled: true,
},
},
},
},
],
};
This is to allow always math mode for LESS loader. The newer one-line configuration that is presented in the Theming site of react.semantic-ui.com does not work at least with CRA Typescript.
Inside the file ./src/semantic-ui/theme.config
/*******************************
Folders
*******************************/
/* Path to theme packages */
#themesFolder : 'themes';
/* Path to site override folder */
#siteFolder : '../../src/semantic-ui/site';
/*******************************
Import Theme
*******************************/
#import (multiple) "~semantic-ui-less/theme.less";
#fontPath : '../../../themes/#{theme}/assets/fonts';
/* End Config */
Your site path is incorrect since inside themes.config the siteFolder is relative to a location inside node_modules location. Instead, we will change it to point inside the src/semantic-ui folder as previously shown.
Please note when testing theme support:
Not all elements implement all themes, check beforehand from node_modules themes folder which themes can be used (are implemented as code). For example: Segment only allows 'default' or 'github' themes. Please see for example segment docs at 1.semantic-ui.com.
Find documentation on how overriding works, for example, adding #pageBackground #3450ad in semantic-ui/site/globals/site.variables changes body background color as documentation suggests. This is good way of testing whether 'site' configuration works as expected.
Related
I'm trying to understand how to customize the Angular CLI build process to be able to have React components properly built when they import scss files.
I'm currently able to build an Angular project where some React components are used. There's a lot of material out there that explains how to achieve it (it's pretty simple actually).
I still haven't found an article that points out how to have scss file imports properly resolved in .tsx files though.
For example, if I have this simple React component:
import * as styles from "./styles.scss";
const ReactComponentWithBrokenStyles = () => (
<div className={styles.root}>This div won't have a class</div>
);
export default ReactComponentWithBrokenStyles;
how can I edit the Angular CLI build process to properly add the loaders that would transform the .scss file?
I've found some resources pointing me to using a custom builder instead of the standard builder, which would allow me to provide an extra webpack config file. What I don't understand is how to write the loaders in that file to solve my problem.
The default Angular CLI webpack config already has a loader for .scss files, which need to be transformed and referenced by Angular components, and I don't want to override that... so how can I add a loader just for .scss files that are imported in .tsx files? Is there a way to tell webpack to match files based on siblings in addition to the usual regex?
I guess this is exquisitely a webpack question after all.
Note: using Angular CLI v7 and webpack 4.
The real problem was: I need to distinguish Angular .scss files from React .scss files.
The solution I came up with is centered around using oneOf in Webpack's rule configuration for .scss files, which allows discriminating between files that pass the same test (/\.scss|\.sass$/) in a more fine grained way.
So I've used #angular-builders/custom-webpack as suggested by the link I posted in the question, and I've created this customizer for the standard Angular CLI Webpack configuration:
const reactScssFilesLoaders = [
"style-loader",
{
loader: "css-loader",
options: {
discardDuplicates: true,
importLoaders: 1,
modules: true,
localIdentName: "[name]__[local]___[hash:base64:5]",
},
},
"postcss-loader",
"sass-loader"
];
/**
* Modifies the default Webpack config so that our React components are able to
* import styles from scss files as JS objects
* #param {*} defaultAngularConfig The default Webpack config that comes with the NG Cli
* #param {*} buildOptions The build options (not needed here)
* #returns The adjusted Webpack config
*/
function customizeWebpackConfig(defaultAngularConfig, buildOptions) {
const builtInNgScssFilesRule = defaultAngularConfig.module.rules.find(r => r.test.source.includes("scss"));
if (!builtInNgScssFilesRule) {
throw new Error("WTF?");
}
const angularScssFilesLoaders = builtInNgScssFilesRule.use;
// We only want one top level rule for .scss files, so we need to further test
// We want to leave normal Angular style files to the default loaders, and
// we just want to turn styles into JS code when imported by tsx components
builtInNgScssFilesRule.oneOf = [{
issuer: /\.(tsx)$/,
use: reactScssFilesLoaders
}, {
test: /\.(component)\.(scss)$/,
use: angularScssFilesLoaders
}]
delete builtInNgScssFilesRule.exclude;
delete builtInNgScssFilesRule.use;
return defaultAngularConfig;
}
module.exports = customizeWebpackConfig;
Works like a charm.
I've created a React project with typescript using create-react-app version 3.4.1.
I'm trying to avoid the use of relative paths in my project. Here's a part of my project tree:
/
|_ public
|_ tests
|_ src
|____ Scenarios
|____ Components
|____c
What I basically want is to be able to to do something like import '#components/c'. I've tried to add this part to my tsconfig.json file:
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"*": ["src/*"],
"tests": ["tests/*"],
"public": ["public/*"],
"#components/*": ["src/Components/*"],
"#Scenarios/*": ["src/Scenarios/*"],
},
...
}
}
But every time I'm starting my app using yarn start my tsconfig deletes this part of my code (eveything but my "baseUrl" part). As far as I know since version 3 of react-create-app, solved this problem partially with enabling baseUrl property to affect the imports' root dir. But I couldn't find anywhere a working solution to set absolute paths from tsconfig path directory. The partial solution doesn't work for me as I'm probably going to import stuff from public directory.
I did try this solution from last year but it wouldn't work for me. Did anyone manage to get this or any other solution working?
Ideally the solution will enable me to still use create-react-app and not to use other packages but of course any solution would work.
you can do it with your solution by add tsconfig.extends.json and use craco or any library to custom webpack. This is my craco.config.js:
const path = require('path')
module.exports = {
webpack: {
alias: {
src: path.resolve(__dirname, './src/')
}
}
}
Problem
create-react-app v2+ supports TypeScript and CSS Modules out of the box... separately. The problem arises when you try to use the two together. Facebook had an extensive discussion about this issue and ultimately closed it off on GitHub. So developers have to use hacks and other workarounds to get these two technologies to play nicely together alongside CRA.
Existing workaround:
You can manually create ComponentName.module.css.d.ts files with type definitions like this: export const identifierName: string. This allows you to take advantage of TypeScript's typing and VS Code's auto-complete when you go to import ComponentName.module.css. Unfortunately, this is extremely tedious.
Solution (?):
The folks over at Dropbox created typed-css-modules-webpack-plugin to address this issue; it auto-genertes those *.d.ts files for you. They show how to install it with yarn or npm and then give this minimal code example:
const path = require('path');
const {TypedCssModulesPlugin} = require('typed-css-modules-webpack-plugin');
module.exports = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
},
{
test: /\.css$/,
use: [
'style-loader',
// Use CSS Modules
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
],
},
// Generate typing declarations for all CSS files under `src/` directory.
plugins: [
new TypedCssModulesPlugin({
globPattern: 'src/**/*.css',
}),
],
};
Unfortunately, it's not immediately clear how I can use this with create-react-app. I'm not very knowledgeable when it comes to Webpack, and I'm using customize-cra to avoid ejecting out of create-react-app so I can customize the Webpack configs for some things I need. For example, Ant Design lets you import components on demand by using babel-plugin-import as detailed here:
https://ant.design/docs/react/use-in-typescript#Use-babel-plugin-import
Question: How can I convert the above Webpack configuration code to a customize-cra equivalent so that I don't have to eject out of CRA?
Okay, so I eventually did figure this out, and I wrote a blog post on the subject for anyone who runs into a similar issue:
https://aleksandrhovhannisyan.github.io/blog/dev/how-to-set-up-react-typescript-ant-design-less-css-modules-and-eslint/#3-create-react-app-css-modules-and-typescript-
The solution uses the typescript-plugin-css-modules plugin. Here are the relevant bits from my blog post:
yarn add -D typescript-plugin-css-modules
After it’s installed, add the plugin to your tsconfig.json:
{
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }]
}
}
Next, create a file named global.d.ts under your src directory. You don’t have to name it global, by the way; you can name the file whatever you want, as long as it has the .d.ts extension. Enter these contents:
declare module '*.module.less' {
const classes: { [key: string]: string };
export default classes;
}
If you want to also use SASS or CSS, simply add more module declarations and change the .less extension.
We’re almost done! Per the plugin’s usage instructions, if you want intellisense to work in VS Code, you’ll need to force VS Code to use your workspace version of TypeScript instead of the globally installed version. Remember when we installed TypeScript via CRA at the very beginning? That’s our workspace version of TypeScript.
Here’s how to use the workspace version of TypeScript in VS Code:
Open any TypeScript file.
Click the version number on the blue status bar at the bottom of VS Code.
Select Use Workspace Version (3.7.3 as of this writing).
Here’s a screenshot to make that clearer:
Once you do that, VS Code will create a .vscode directory in your project for workspace settings.
At this point, you're all set to use CSS Modules with TypeScript.
UPDATE 2022
Note: If you're using react-scripts#2.1.x or higher you don't need to use custom definitions like
declare module '*.module.less' {
const classes: { [key: string]: string };
export default classes;
}
Custom definitions
Note: Create React App users can skip this section if you're using react-scripts#2.1.x or higher.
Also you can add this VS code setting to you local JSON settings file:
{
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}
This will ensure that VS Code will use the project’s version of Typescript instead of the VS Code version and will prompt you to do so if you aren’t already.
Well, everything is correct as said AlexH.
1 in tsconfig.ts.
{
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }]
}
}
2 in global.d.ts
declare module '*.module.less' {
const classes: { [key: string]: string };
export default classes;
}
But Also in tsconfig you should write
"include": [
"global.d.ts",
...
]
I have a big project with a lot of sass files (and all of them import a main sass file with some varibales and classes).
I belive you all know the problem that the file that i am import in all of my css files is duplicate in the main css file after buiding the project.
i tried using ExtractTextPlugin options and plugin that called OptimizeCssAssetsPlugin, and i didnt find solution for this problem.
Here is the plugins array in my webpack prod config:
new ExtractTextPlugin({
filename: "styles.css",
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
canPrint: true
}),
anyone know the solution for this problem?
thank you!
Less users are in luck! #import (reference) does exactly what it that:
Use #import (reference) to import external files, but without adding the imported styles to the compiled output unless referenced.
However in Stylus /Sass, there is no direct way to import by reference:
The closest you will get is a silent class / placeholder. These work a little different to how LESS and reference work, you can read more on them here: http://blog.teamtreehouse.com/extending-placeholder-selectors-with-sass
Refernce: Rerernce
I have a question or problem.
I'm using React v.16 so when I create a project I did with create-react-app that webpack is already preconfigured. And I want work with ol-cesium, and in npmjs I see that I have to:
create an alias to the goog directory. With webpack:
resolve: {
alias: {
'goog': path_to_goog,
}
}
If I dont create a webpack file show me this error:
./node_modules/olcs/AbstractSynchronizer.js
107:22-35 "export 'getUid' (imported as 'olBase') was not found in 'ol/index.js'
How can solve it??? And what is path_to_goog???
EDIT
Thanks to Shishir Anshuman for your help.
Now I add alias on webpack.config.dev.js and webpack.config.prod.js but some me a lot errors.
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebookincubator/create-react-app/issues/253
modules: ['node_modules', paths.appNodeModules].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebookincubator/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
// Ol-Cesium
'goog': '../node_modules/olcs/goog',
},
plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
In console show me this error:
./node_modules/olcs/AbstractSynchronizer.js
107:22-35 "export 'getUid' (imported as 'olBase') was not found in 'ol/index.js'
__stack_frame_overlay_proxy_console__ # index.js:2178
handleErrors # webpackHotDevClient.js:178
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:211
./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent # eventtarget.js:51
(anonymous) # main.js:274
./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage # main.js:272
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit # emitter.js:50
WebSocketTransport.ws.onmessage
In the Codesandbox provided by you, I was unable to find the root cause, but I noticed the following:
I noticed that you have used the ES6 import statement:import OLCesium from "olcs/OLCesium";.
But as per this issue, the module is not yet ported to ES6.
I have never used this library before, So it's hard to figure out what exactly is going on.
Did you try installing https://www.npmjs.com/package/geom ? Since the error says 4.6.4/geom/Point.js is missing.