I've had to go back to an old version of compass: 0.12.7
Otherwise it fails on missing files. Before installing I removed the existing compass installation.
It correctly compiles my css file when I make a change to the scss file.
But when I ask sencha to make a production build with "sencha app build production" the css file in my project gets replaced with a different one.
The file probably gets overwritten at the following line during the build process:
[INF] executing compass using system installed ruby runtime
overwrite ../css/app.css
So it claims to use my installed version of compass.
What am I doing wrong here?
You have the same problem i have met.
Sencha touch 2.4.0 SASS compile error
You should not write your custom css in app.css.
IMHO, there are two ways to add custom css.
1. app.json
2. #import your custom scss file in app.scss in resource/sass/app.scss and then use sencha ant sass to compile css file.
Related
I installed all of steps of Taiwlind but not working. How i fix it.
I just want to install to my project tailwind
There could be many reasons why Tailwind is not working in your project.
Make sure that you have installed Tailwind using the correct command in your terminal or command prompt, depending on your operating system. You can use the following command to install Tailwind:
npm install tailwindcss
Check that you have created a configuration file for Tailwind in your project. You can create a configuration file by running the following command in your
terminal
npx tailwindcss init
Ensure that you have included the Tailwind CSS file in your project. You can include the file in your HTML or CSS by adding the following line of code:
scss
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
Check that you have properly configured your build process to compile your CSS code. If you are using a build tool like Webpack or Gulp, you will need to configure it to compile your Tailwind CSS code.
I'm currently building an npm component library and i'm using a rollup bundling process to compile the library for distribution. The css for the project is written using SCSS, but it also depends on Bulma, which is a css framework written in SASS.
What I would like is to be able to bundle the bulma source code along with my custom scss all into one scss file that I can then use in other projects. That way I can still benefit from the features offered by scss in those projects, such as variables and mixins for example.
I would like this to be automated during the build process so that I don't have to worry about it while developing new components. I've looked at many npm packages for bundling scss files but none of them support SASS and SCSS together. I've also tried converting my project entirely to sass but there doesn't seem to be any good support for sass bundling in general.
So for example, I may have a main.scss file that looks something like this:
#import "~bulma/bulma.sass";
#import "./utils/variables.scss";
It imports both sass and scss files together. This is something that is supported by the sass compiler, and I can compile this to a bundled css file without any issues. But there does not seem to be any support for bundling into one scss file.
The two main NPM packages that i've been attempting to use are:
scss-bundle & bundle-scss
scss-bundle is great, but it doesn't seem to have SASS support, so that's a no-go with Bulma.
As for bundle-scss I converted my project to use SASS and configured the package accordingly, here's the config is used:
{
"dest": "dist/bundle.sass",
"mask": ["src/styles/**/*.sass", "node_modules/bulma/**/*.sass"]
}
From what I can tell, this should go through all of the files in all of the subdirectories of both my styles folder and the Bulma dependency folder and compile them together into one bundle.sass file. And although I would prefer the configuration options from scss-bundle, this is essentially what I am looking for.
However it doesn't work. The package can't seem to resolve the #import statements within the SASS files. Regardless of the syntax I use. And even if it was based on syntax, I can't change Bulma's syntax. Could it be that I'm using the wrong globbing pattern in the mask option? Or does this package just not work?
So my question is, and TLDR:
Can I bundle SASS and SCSS together into one file using some NPM package?
If not, is there a simple and automated way for me to transpile SASS to SCSS and then bundle them together?
If neither of those are possible, is there a working npm SASS bundler that someone can direct me towards? Because bundle-scss does not seem to work.
Also, I am aware that I could just import Bulma separately into the project that needs it, but i'd really prefer to have it all come down together in one package.
Thanks! I hope I explained everything clearly!
I copied the config.json to the bootstrap source folder and followed the compiling instructions on Bootstrap's site.
It build bootstrap with everything where I only wanted what was in the config.json file.
What is missing?
The Grunt build doesn't use the config.json file. Only the web-based Customizer uses it.
To customize with Grunt, just edit the.less files and/or Gruntfile.js directly.
I use less.js to code my css. When I build the project (grunt-server, grunt), the grunt-contrib-less plugin converts the less.js style to my main.css file. I only include this file in my index.html.
This works great for deploying, but for developing not so much. I need to build the project or run "grunt less" to view changes of my css.
I'm guessing there is an easier way of doing this, but i'm new with the grunt en yeoman stuff so I don't know where to look.
I recommend using grunt-contrib-watch, together with grunt-contrib-less.
I am trying to create a new sencha touch app using "sencha generate app MyApp ../MyApp" command on Windows.
I have done the following :
Downloaded the latest sencha SDK and extracted it in folder "D:\MyProjects\sencha-touch-2.1.0-gpl" folder.
Installed the sencha SDK tools in "D:\MyProjects\SenchaSDKTools-2.0.0-beta3" folder.
Ensured that the system environment variable "SENCHA_SDK_TOOLS_2_0_0_BETA3" is indeed pointing to "D:\MyProjects\SenchaSDKTools-2.0.0-beta3"
As per the sencha documentation I am supposed to run the sencha command in the sencha SDK or application folder.
So if I cd to folder "D:\MyProjects\sencha-touch-2.1.0-gpl" and run "sencha generate app MyApp ../MyApp", I get this warning message
**"[WARN] The current working directory (D:\MyProjects\sencha-touch-2.1.0-gpl) is not a recognized Sencha SDK or application folder. Running in backwards compatible mode."**
Why does not sencha recognize this as the SDK folder?
Looking at the code in "sencha.js" file included as part of the sdk tools, it seems that sencha is looking for a ".senchasdk" file.
So I tried the same command from one of the subfolders in the examples folder (since this folder contains a .senchasdk file)
Now I end up with an error
"node.js:201
throw e; // process.nextTick error, or 'error' event on first tick
^
Error: Cannot find module 'D:\MyProjects\sencha-touch-2.1.0-gpl\command\sencha.js'
at Function._resolveFilename (module.js:332:11)
at Function._load (module.js:279:25)
at Array.0 (module.js:479:10)
at EventEmitter._tickCallback (node.js:192:40)"
Since it seemed as if sencha was looking for a non existing folder called "command", I copied the contents of SDK tools folder to a new folder called "command" placed it under D:\MyProjects\sencha-touch-2.1.0-gpl\ folder.
Executing the sencha generate command, results in an infinite loop and a lot of Node.exe processes are spawned (observed via TaskManager).
Any help would be greatly appreciated.
I had the same problem and finally figured that Sencha Touch 2.1 is not longer using Sencha SDK Tools but using Sencha Command instead.
You can find more here :
http://docs.sencha.com/touch/2-1/#/guide/command
and here
http://docs.sencha.com/touch/2-1/#!/guide/command_app-section-2
Hope this helped
Try this...
Make sure three things..
Sencha touch installed path.
Application generating keyword
Where you going to save your Sencha touch project.
Lets create a project.
Open a command prompt
Type your Sencha touch sdk installed path. (For me: C:\inetpub\wwwroot\touch-2.3.1)
And type sencha generate app MyApp. here MyApp is our project name.
Then type the path where you going to save your project MyApp(For me: C:\inetpub\wwwroot\Poonguti\MyApp ).
press Enter.
Now, I hope you create a Sencha touch project.
here is an attached screen shot.
This is because, you are using the older version of SenchaCMD.
This can happen because of two reasons.
Reason 1
You installed SenchaCmd first and SenchaSDK second. This may override the latest version of SenchaCmd with older version, which is shipped with SenchaSDK.
Solution
Install SenchaSDK first and SenchaCmd last.
Reason 2
The path of SenchaCmd set on environment variable may be wrong. Please check this.
As TDeBailleul said, you don't need SenchaSDK for the latest version of SenchaTouch.
Just use SenchaCmd only.
I had the same issue. Finally, the problem was that I was using an old version of the sdk...
I would recenment to un installed version 2.0 and download and installed version 3.0.
Download Link
Install
sencha cmd
ruby
compasss
and Download sencha touch
extarct sencha touch and then type
sencha -sdk PATH TO TOUCH folder generate app APPNAME PROJECTPATH
Try navigating to the path where your sencha cmd got installed instead of sencha sdk folder
Open command propmt
cd C:\..\bin\Sencha\Cmd\4.0.2.67
Then type sencha and then press enter
You should get something like Sencha Cmd V4.0.2.67
my SDK is where i extracted my ExtJS files.
~/current/gaia/static/js/ext-5.1.1
you can generate workspace from within the folder like this:
sencha generate workspace /tmp/extJSworkSpace
or
you can specify it's location if you are not in the folder.
sencha -sdk ~/current/gaia/static/js/ext-5.1.1 generate workspace /tmp/extJSworkSpace
contents of the SDK folder looks like:
ls ~/current/gaia/static/js/ext-5.1.1
build cmd ext-bootstrap.js LICENSE overrides packages Readme.md src version.properties build.xml examples index.html licenses package.json plugins release-notes.html test welcome
if you don't specify -sdk flag and are not inside the folder, it will create the workspace still but there will be no 'ext' folder inside (not copied).
hope this helps.