I have a CSS file in the resources/css directory of my Ext JS package. Nevertheless package-all.css is empty after the sencha package build.
How can I make Sencha put the CSS file's contents into package-all.css? It should finally be copied to the all.css file of the app that uses the package.
You have to add it to package.json as a resource.
/**
* Extra resources to be copied along when build
*/
"resources": [
"resources/css/app.css",
"resources/images",
"resources/static",
"resources/libs",
"resources/translations"
],
or even better as a css file.
/**
* List of all CSS assets in the right inclusion order.
* Each item is an object with the following format:
* {
* "path": "path/to/item.css" // Path to file, if local file it must be relative to this app.json file
* "remote": true // (Optional)
* // - Defaults to undefined (falsey) to signal a local file which will be copied
* // - Specify true if this file is a remote file which will not to be copied
* "update": "delta" // (Optional)
* // - If not specified, this file will only be loaded once, and
* // cached inside localStorage until this value is changed to either one below
* // - "delta" to enable over-the-air delta update for this file
* // - "full" means full update will be made when this file changes
*
* }
*/
"css": [
{
"path": "resources/libs/Arcgis v3.11/arcgis311.css",
"remote": true
},
{
"path": "resources/css/app.css",
"remote": true
}
]
You can include it directly to index.html. Its working fine in build as well.`
<title>xxxxx</title>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<link type='text/css' rel='stylesheet' href='resources/custom/css/my_css.css' />
<link type='text/css' rel='stylesheet' href='resources/fonts/font-awesome-4.3.0/css/font-awesome.css' />
<script id="microloader" type="text/javascript" src="bootstrap.js"></script>
`
Inspired by Tarabass' answer, I added my CSS file in package.json inside the package. Now it is used by the app.
"css": [{
path: "resources/css/styles.css"
}],
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 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.
I have an ExtJS package with the following structure:
Package
classic
resrouces
file.json
When I build the app with the package in production mode, the file.json is missing.
How can I get the build to include the resources from classic directory (within a package)?
EDIT
Adding the following to package.json enables copying files from both toolkit specific and shared resources directory.
"resource": {
"paths": [
"${package.dir}/resources",
"${package.dir}/${toolkit.name}/resources"
]
},
However, all the files (from classic/resources/ and resources/) are copied to the same directory (build/production/AppName/classic/resources/PackageName/) and if same filename exists in both directories, one file overwrites the other in the build directory.
build/production/AppName/classic/resources/PackageName/some_resource_file.json
How can they be separated so both files exists in the build?
In your main project folder, you have the file app.json, where you can define which directories should be copied when building the project and a rule for skipping some of them:
{
"production": {
"output": {
"resources": "resources",
// ...
},
},
"resources": [{
"path": "resources", // in your case classic/resources
"output": "shared"
}],
/**
* File / directory name pattern to ignore when copying to the builds. Must be a
* valid regular expression.
*/
"ignore": [
"(^|/)CVS(/?$|/.*?$)"
]
}
I've created my app the normal way with cmd in ext 5 and what I had done was simply put my css files (in the index.html file) and when I would run sencha app build my styles word override the ones in ext (that is things like the body tag).
Now, I've recreated my ext project with cmd again from scratch, copied in my app.js and app folder and it works but it seems that my app flashes my body tag but then it goes away and the standard css takes over.
That is, in my in my index.html I have the lines:
<link href="/Content/Styles/scrum-style.css" rel="stylesheet" type="text/css"/>
<link href="/Content/Styles/SessionSchedule.css" rel="stylesheet" type="text/css"/>
***Added Note:
After reading, I've copied the css from the two files into /sass/etc/all.scss and that pushed the css into the top of the generated file but it still seems to be overridden.
(also posted to sencha forums yesterday but got no response so trying here)
You could try adding them to app.json:
"css": [
{ "path": "Content/Styles/scrum-style.css" },
{ "path": "Content/Styles/SessionSchedule.css" },
{
// this entry uses an ant variable that is the calculated
// value of the generated output css file for the app,
// defined in .sencha/app/defaults.properties
"path": "${build.out.css.path}",
"bundle": true,
"exclude": ["fashion"]
}
],
Or you could load them remotely:
"css": [
{ "path": "Content/Styles/scrum-style.css", "remote": true },
{ "path": "Content/Styles/SessionSchedule.css", "remote": true },
{
// this entry uses an ant variable that is the calculated
// value of the generated output css file for the app,
// defined in .sencha/app/defaults.properties
"path": "${build.out.css.path}",
"bundle": true,
"exclude": ["fashion"]
}
],
But add them to "resources": [] as well to copy them on build.
There are 2 ways to include external CSS files in your application.
You can add references in index.html file. In this case after build you need to manual copy CSS files in build application resources folder.
You can add reference in app.json file in css array and build app. In this case if you do change in css file , you need to build app.
Using CMD from within Sencha Architect I've been able to build a production build of my application. However I can not seem to figure out how to exclude a js file from the build process. I don't want it compiled in with app.js I want it as a separate script include in index.html - so cmd shouldn't touch it basically.
Sencha Arhitech generates and calls build.xml which calls build-impl.xml which calls init-impl.xml
Everywhere I've read, they say to include the following;
<target name="-before-init">
<echo>Setting build.operations...</echo>
<echo>app.dir=${app.dir}</echo>
<property name="build.operations">
exclude
-file=\resources\js\version.js
</property>
</target>
However it refuses to exclude the file...I can see the echos so I know it's hitting the target..
Any ideas? Is this how I am supposed to exclude files?
app.framework.version=4.2.1.883
app.cmd.version=4.0.4.84
Turns out this won't be possible to do until Sencha Architect 3.1
Steps by which i was able to exclude AppConfig file in production build.
Here file exclude means it will not be compressed/bundled and variable/properties of this file could be used any where in the app.
1. Config file(AppConfig.js in our case) MUST be inside resources fodler. Below are the contents of our AppConfig file
/////////////IxDetect is my Application Namespace///////////////////
var IxDetect = IxDetect || {};
IxDetect.AppConfig = {
logoPath: '',
logoTitle: 'Internal',
pentahoUrl: 'http://107.20.104.150/pentaho',
pentahoRptCube: 'TrafficWithFraudIndex'
};
////////////////////////////////
2. Link this file in index.html page like below
<script src="resources/AppConfig.js"></script>
3. Add one more item in "js" array in "app.json" file
"js": [
{
"path": "resources/AppConfig.js", // This is my file. Also make a sure you do not miss bundle and includeInBundle property
"bundle": false,
"includeInBundle": true
},
{
"path": "app.js",
"bundle": true
}
],
4. Try development and production build all should work file
Note: All above changes are done and tested on 6.2(Framework/CMD)