Environment:
Mac OSX Mavericks 10.9.4
Compass 1.0.1 (Polaris)
Compass-blueprint (1.0.0)
Sass 3.4.5 (Selective Steve)
sencha app build testing command no error
When I compile app.scss file in the ./resources/sass/ directory, an error happened.
compass compile app.scss
error app.scss (Line 209 of /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/touch/resources/themes/stylesheets/sencha-touch/base/src/_Class.scss: File not found or cannot be read: /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/resources/sass/fonts/pictos/pictos-web.woff)
File not found or cannot be read: /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/resources/sass/fonts/pictos/pictos-web.woff
And then I copy touch/resources/themes/fonts folder to resources/sass/ folder and then this error fixed.
But I doubt why this will happen when in the version 2.3.2 ( sencha touch) I have used compass to compile correctly.
Then there is another error:
compass compile app.scss
error app.scss (Line 42 of /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/touch/resources/themes/stylesheets/sencha-touch/base/src/_ProgressIndicator.scss: Undefined mixin 'experimental'.)
Sass::SyntaxError on line ["42"] of /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/touch/resources/themes/stylesheets/sencha-touch/base/src/_ProgressIndicator.scss: Undefined mixin 'experimental'.
Run with --trace to see the full backtrace
And now I can't fix it.
This is the content of app.scss:
// The following two lines import the default Sencha Touch theme. If you are building
// a new theme, remove them and the add your own CSS on top of the base CSS (which
// is already included in your app.json file).
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
// Custom code goes here..
// Examples of using the icon mixin:
// #include icon('user');
config.rb:
# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)
# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', 'touch', 'resources', 'themes')
# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
output_style = :compressed
environment = :production
Thanks to #Saki . I pick one sentence from sencha official blog to help other people meet this problem:
With the introduction of Ext JS 4.2 and theme packages, compass watch
no longer understood the structure of themes making “sencha ant sass”
the only option for building Sass. The “sass” build step, however, was
a forced, full rebuild and was many times slower than compass watch.
This is the link: http://www.sencha.com/blog/using-the-new-app-watch-command-in-sencha-cmd-4/
Related
I'm very new to Gatsby and have a project bootstrapped with the gatsby-ghost-starter starter. The starter works just fine and now I'm attempting to install a theme for the blog section of the site.
I'm attempting to use gatsby-theme-blog for the blog section. I've ran npm install gatsby-theme-blog in the root of my project and configured gatsby-config to contain:
`gatsby-plugin-theme-ui`,
{
resolve: `gatsby-theme-blog`,
options: {
// basePath defaults to `/`
basePath: `/blog`,
},
},
Note: this is not my entire config file, the file is longer and I'm just showing what I added for the sake of installing this theme.
After installing the theme and configuring it in the config I ran gatsby build and got the following error:
The error is occurring in my node_modules file located at node_modules/gatsby-plugin-theme-ui/src/provider.js:1:1 and node_modules/gatsby-plugin-theme-ui/gatsby-ssr.js:1:1. I tried deleting the comment /* #jsx jsx */ on line 1 and restarting the server. When I remove that comment and restart I get the same error on line 2.
What is causing this error? This is my first time trying to install a theme within an existing project, am I forgetting something?
I'm trying to import in Typescript some SVG icons, but I'm facing some problems.
At the first time I tried to import them, Typescript wasn't able to recognize the file extension.
I solved this issue by creating, as suggested in other Stack Overflow and Github topics, a custom.d.ts file with this rule inside:
declare module "*.svg" {
const content: React.StatelessComponent<React.SVGAttributes<SVGElement>>;
export default content;
}
But the problems seem to not finish here, even if the compilation seems going fine.
The current project I'm working on, is structured this way:
Typescript + React package (with SVG icons files) (SDK)
React Internal Sample page (package) to use the SDK
other internal packages...
For our development phase, we build through Webpack all the packages through different loaders and see the result through the Sample page.
But the final product flow to production is quite different: I export the SDK as CommonJS to an internal NPM Registry so another company can use it in a React project (the equivalent of the Sample page but for production) and push to production the final Webpack bundles with both projects inside.
So, to load in the Sample application the SVG icons, I'm using #svgr/webpack loader, which converts the files.
But when I have to export the SDK through npx tsc, I see that the exported folder, does not contain the folders with svg files.
I've tried to include them in tsconfig.json/files, but got this error:
TS6054: File '<path>/*.svg' has an unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
So, to attempt exporting them I converted my exporting script to use #svgr/cli to export the files to React files from SVGs before compiling to typescript:
// package.json
scripts: {
"build-ts": "rm -rf ./lib; yarn convert-svg-to-react; npx tsc",
"convert-svg-to-react": "npx #svgr/cli -d src src --typescript",
}
In this way, I get the new Typescript files mixed with the SVGs inside the package (so I'll have to remove them later) and I can see them in the exported folder lib.
But watching inside the Typescript exported code, I can see this line (for each svg import):
var close_svg_1 = __importDefault(require("./icons/close.svg"));
Leaving out the Typescript function for Babel __importDefault, you can see that it still requires the file svg, but what I have at this point, are the React components that replaces those files.
During development it works fine because #svgr/webpack loader, resolves the svg files.
But requiring svg files that do not exist, should make the application above it crash.
So, I'm stuck and I need some clues to get out of this situation.
Some clues that I got (but wasn't able to find how to do that), were:
[Best] Find how I can export raw svg files as they are during Typescript compilation without doing that manually, as they are not all in one folder but divided per components areas in the package tree. Doing this, I would tell the other company to add #svgr/webpack to its own building process.
Find how can I tell Typescript to import svg files without specify the extension (currently, removing .svg probably makes it fallback to .ts/tsx and therefore it cannot find the file with that name). In this way, the require would keep requiring the same file name but I could convert SVG to React Components without occurring in problems. But this would also require Typescript to export the file
Otherwise, I should convert all the SVGs in React components and directly use them instead of making them being compiled by #svgr/webpack, but I'm not sure this would have some other side-effects.
Any other clues or any way to achieve the ideas I got? Thank you everybody.
I've had issues with my react project and as such i've just made a new reactapp and updated all the packages in my package.json. However, Either the updated react version, react dependancies or node-sass is not allowing the project to be compiled. It installs without any vulnerabilities which is great, but the sass compiler doesn't want to play ball.
Folder structures as follows
--src
--api
--assets
--fonts
--images
--components
--pages
--scss
--_variables.scss
--_media.scss
--_mavigation.scss
--App.scss
--App.js
--index.js
seems to break whenever i'm referring to background-images in css, i can't seem to get the right path to work, despite the same paths working in an older version of reactjs.
I get the following error
Failed to compile.
./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/App.scss)
Module not found: Can't resolve './scss/assets/images/camera.png' in 'xxxproject/src'
The css this is erroring on is as follows;
background-image: url('./assets/images/camera.png');
Anyone got any ideas?
Problem is like
Background url is like
'./assets/images/camera.png'
Node sass tring to resolve it at
'./scss/assets/images/camera.png'' ///scss causing problem
Solution : use ../ in background-image
background-image: url('../assets/images/camera.png'); // as per your folder structur
When I want to build my app with SenchaCmd I get the following error:
Failed to find file(s) for depdency reference /workspace/SmartphoneClient/app.js::ExtRequire::Ext.ux.picker.DateTime
This is how my app.js looks:
Ext.Loader.setPath({
'Ext': 'touch/src',
'CatchMyPain': 'app',
'Ext.ux': 'extensions/ux'
});
Ext.require('Ext.ux.picker.DateTime');
Ext.require('Ext.ux.field.DateTimePicker');
The two files DateTime and DateTimePicker are in the correct folders under extension/ux/field/DateTimePicker.js and extensions/ux/picker/DateTime.js
The app works fine with the Chrome Browser and on Safari mobile Browser. There I get no Messages or Errors in the Console.
Where could be my error?
Because Sencha CMD build cannot automatically resolve the paths from the loader. However it uses classpath. This should be defined in the config file (as as comma seperated list). I haven't tested it thought because I use the sencha compile command (see bellow)
From the docs:
The sencha app build command knows where to find the source of your application due to the app.classpath configuration value stored in ".sencha/app/sencha.cfg". By default, this value is:
app.classpath=${app.dir}/app
Adding directories to this comma-separated list informs the compiler where to find the source code required to build the application.
Yours should be: app.classpath=${app.dir}/app, ${app.dir}/extensions/ux
If you use the sencha compile command:
sencha compile -classpath=./extensions/ux -classpath=./app page -in index.html -out test.html
I had to add the directory into the classpath of .sencha/app/sencha.cfg
app.classpath=${app.dir}/app.js,${app.dir}/app,${app.dir}/extensions
this way the senchaCMD found all the files.
I've been looking into Compass and the more I look, the more it feels like the way that CSS should be written. As a test case, I'd like to use it in one of my CakePHP projects. Unfortunately, I'm having some trouble with the initial configuration. Specifically, with getting the resources in the right place and referenced properly in the compiled CSS.
I'm creating a :stand_alone project in my /app directory. Well, that's what I want to do. Compass doesn't seem to like that. In creating the project, I've told it where to put the css, images and js and those resources do, in fact, make it to the proper directory. Unfortunately, because I'm not creating the directory in the webroot, the resources are being referenced incorrectly when compiled.
I'm creating the Compass project in my CakePHP app/ directory with this command:
$ compass -f blueprint --sass-dir sass --css-dir webroot/css/ --images-dir webroot/img/ --javascripts-dir webroot/js/ --output-style compact .
The compiled CSS, though, wants to reference Blueprint's showgrid.png image as:
url('/webroot/img/grid.png?1264969358')
I suppose this is a pretty predictable result, but I can't figure out how to get the compiled CSS to reference the correct /img/grid.png?whatever path. Is that even possible? Am I forced to create my Compass project directly in my webroot?
Thanks.
UPDATE
Content of my config.rb file:
# Require any additional compass plugins here.
project_type = :stand_alone
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "webroot/css"
sass_dir = "sass"
images_dir = "webroot/img"
http_images_path = "/img"
javascripts_dir = "webroot/js"
output_style = :compact
Running Compass v0.10 and using the following configuration:
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
sass_dir = "sass"
css_dir = "webroot/css"
images_dir = "webroot/images"
javascripts_dir = "webroot/js"
http_stylesheets_dir = "css"
http_javascripts_dir = 'js'
http_images_dir = 'images'
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
provides the expected results.
Compass v0.10 is just about to be release, you can install it with:
(sudo) gem install compass --pre
To create a project using this config:
Create a project directory
Save the config into config.rb in the project directory.
From within your project directory run the command: compass install blueprint
Rails and other frameworks have the sass files and configuration in the project root, outside the public webroot. A stand-alone project should work fine this way too.
Are you using image_url() for when you're referencing an image?
In your compass.config file you can set the http_images_path if it's different from your directory path. See the configuration page in the wiki for more details.