I am developing an addon in ember.js for my new ember app.
I am trying to figure out how to use sass as styles with my addon and make it independent from my app.
Saying that addon uses sass but the app using it dones't necessary has to have ember-cli-sass in its packages.json.
I've tried almost every solution that there is to be found on google, co I come here for the help :)
Lets say my addon name is awesome-tables, so if I put a css file in awesome-tables/addon/styles/addon.css the styles are concatenated into vendor.css as expected, but it doesn't work for sass / scss
For addons you should add #import intro your app.scss like next ( both from addons )
#import 'ember-freestyle';
#import "pod-styles";
such instructions usually described in README.md for repo. If it's your repo - check next code https://github.com/ebryn/ember-component-css/blob/ae18f897d5b40ef1b3346d8857f6a1136d1b7b4b/lib/include-all.js#L56 as example ( https://github.com/ebryn/ember-component-css/ work with css/less/sass )
P.S. check naming for addon styles
https://github.com/aexmachina/ember-cli-sass
Addon Development
If you want to use ember-cli-sass in an addon and you want to
distribute the compiled CSS it must be installed as a dependency so
that addon/styles/addon.scss is compiled into dist/assets/vendor.css.
P.P.S SASS with Ember CLI addons
Related
django-ckeditor packages comes with highlight.js library for code snippets and that library comes with some pre-installed styles.
As I prefer seti-ui style, I download it from highlightjs.org. Inside the downloaded package is seti-ui.min.css file and I copy it to \venv\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins\codesnippet\lib\highlight\styles where all other styles are and then set this in my settings.py:
'codeSnippet_theme': 'seti-ui' # based on the name of css file
And it doesn't work. The editor shows the code snippet but without any style. I've tried several other pre-installed themes like monokai and foundation and they work fine.
Then I noticed that seti-ui.min.css is inside a subfolder base16 in the package I downloaded from highlightjs.org, so I tried \venv\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins\codesnippet\lib\highlight\styles\base16 too but didn't work either.
So what is the correct method to add it?
Firstly I am new to using foundation.
When you go onto foundations website and you download the complete foundation file you get this index file:
that has link references to the stylesheets and the Js files and if you start coding everything works just fine, but if I create a foundation project through php storm it downloads the foundation release straight from GitHub, but this folder:
does not have a index file that includes the required css and js files, and I have tried to find the files but they are not included in this version from github. What files do I need to link to get foundation working.
In short, you'd need to link foundation.min.css and foundation.min.js. also, make sure you include jquery before the js.
I suggest downloading a bundle from Zurb's site in this link and recieve a good and working bundle.
Foundation is a great framework so don't give up, it's totally worth it.
I am using PostCSS and one of the important elements in PostCSS is CSS nesting. WebStorm doesn't like the syntax and highlights errors.
Is there any solution for this issue?
As of WebStorm 2016.3 this issue has been solved. As detailed in the WebStorm Blog, users of PostCSS can now install an official PostCSS plugin by navigating to Preferences > Plugins > and searching for "PostCSS support". After the plugin is installed and WebStorm has been restarted, you must identify any existing css files using PostCSS as PostCSS by going to Preferences > Languages & Frameworks > Stylesheets > Dialects and clicking on the file's CSS dialect and changing it to "PostCSS".
Edit
Evan's answer below is better now as Webstorm have released an official plugin for PostCSS WebStorm support for nesting CSS
Unfortunately, currently the only way to get it to play nice with PostCSS is to do:
Register *.css or *.pcss if you use that extension to treat them as Sass files inside Webstorm. You'll also need to turn off a few syntax checks Webstorm provides after you change the file type depending on what PostCSS plugins you use.
In rails,
js files are located under
app/assets/javascripts
Similarly where to add js and css files in ember-cli app ?
app/styles/ should contain your stylesheets:
Contains your stylesheets, whether SASS, LESS, Stylus, Compass, or plain CSS
(though only one type is allowed, see Asset Compilation).
These are all compiled into <app-name>.css
If you need external JavaScript libraries, you should manage them in dependency sections of package.json and bower.json. You may have to include the assets manually in the build. This could be done by app.import() in ember-cli-build.js or by using ember-auto-import. Have a look in the User Guide for more details.
User Guide also contains a section about folder layout in ember-cli.
I'd like to know how I can use SASS within an Ember-CLI addon?
I have my styles in /app/styles folder, but I'm not sure that's the right location to have them. I have broccoli-sass installed in my addon project, my Dummy test website compiles properly the scss files when I include my folder in /tests/dummy/app/styles/app.scss.
#import 'app/styles/app.scss';
But I don't know how I can compile the scss files to go into the /dist/assets/vendors.css, which is the file loaded by projects using this addon.
OK I just found out the solution
The style folder needs to be in /addon/styles instead of /app/styles, and the root file should be called addon.scss