So I installed Sass for my project via the CLI npm install -g sass but the CSS that I entered is not displaying. So after creating my style.scss file and entering my code, I compiled it using live sass compiler. As a result, the style.css and style.css.map files appeared (like they should). I then went into my html file and imported it.
Am I importing my CSS file correctly into my HTML file? If you see below, I thought this how it should be done. I am not using any framework for this particular project.
Not sure what to be looking out for when issues like this arise, so any leads are appreciated.
My HTML file
My SASS file
Related
I made a simple create-react-app project as a test assignment for a new job. I'm already finished with the project, but there's a catch:
I must turn the project in as a single html file with embeded js and css.
How do I turn my create-react-app project into a single file?
Edit: Running npm build doesn't solve my issue, as it builds the project, but the result is not a single html file! - it generates an index.html plus a static/ folder to import sources from.
I could hand-paste those I guess, but am looking for a more elegant solution!
Run this command:
npm run build
I learned to do a working environment based bower, from there install yoeman and gulp and materialize, I made a web page to root of all this, now I want to upload a host (like 000webhost or firebase) but I do not know which files are the ones I should upload
thx
You should upload everything except bower_components directory since it's content is used only when you compile down the things using gulp on your local machine. Once all your source files are piped through gulp, they are not required on the destination location. None of those files is or should be used during a http request.
I don't know exactly what is your project's structure, but because you specified what you use (bower, gulp) then I can deduct.
So after gulp finishes it's work, you have a public directory where all your combined, minified and copied assets live. This is obviously needed on the server, in your markup, you should refer to those files, not the ones fetched by bower when you've done bower install library1 --save. bower install library2 --save.
Has anyone rolled gulp into apostrophe for compiling assets? I'd like to use ES6, as I'm using a frontend framework that has all of the js nicely split up into separate assets, and have the compilation of that into one minified file part of the normal apostrophe build process (I'm using apostrophe-assets to reference a single root js file which imports everything else).
Great question. You're going to want to build your JavaScript with Gulp into one file before pushing that file to the browser using Apostrophe's asset pipeline.
For example you might have a /src directory at the root of your project that has your JavaScript files. You can pipe these files into your apostrophe-assets directory or some other named directory that is a subclass of apostrophe-module in /lib/modules/.
You can then push your compiled file to the browser as usual: http://apostrophecms.org/docs/tutorials/getting-started/pushing-assets.html#configuring-java-script-for-the-browser
For creating my college webpage using polymer, I have downloaded polymer starter kit 1.0.2. I have customized those html files to my desired text and it runs well when I do the below.
gulp serve
opening well is chrome through
http://localhost:3000/
The problem is, it doesn't show up when I drop files into my college server. The reason for creating a website so that it can be viewed under my name like www.college.edu/~rajesh. We have public_html folder wherein if we put html/css/js files and that is it will accessible public from above URL.
when I copied the contents of app folder along with bower_component folder
the site doesn't come up whereas it work fine locally (using localhost). Only the title gets loaded however there is NO html body visible.
I am totally new to polymer. could this be done? if yes am I missing something.
You have to run gulp serve:dist which will build/vulcanize your site. Then you need to copy app/dist folder
Just a further clarification not sure if you ran this command, according to the readme file when you want to deploy your site you need to run
gulp
which will Build and optimize the current project, ready for deployment. This includes linting as well as vulcanization, image, script, stylesheet and HTML optimization and minification.
All the files needed will then be located in the 'dist' folder.
Build and Vulcanize polymer starter kit github README.md
I have structure like this:
Where I am trying to setup SCSS file watcher.
Here are my current options:
My goal is to compile
../scss/style.scss to ../css/style.css
../scss/user/profile.scss to ../css/user/profile.css
How to setup my setting in file watcher to achieve this pattern?
If it's possible for your project, consider using compass to compile your scss. By doing it this way, regardless of file structure in scss directory, after compilation
will be this structure mirrored in css directory.
It is quite easy to setup, there is also a good guide to read: PhpStorm / Working with SASS and SCSS in Compass Projects
Basically you need to:
Install compass: gem install compass
cd to public\themes\701 directory and run compass init, configuration file config.rb will be created here, edit this configuration to reflect your directory structure
Enable Compass support in settings:
File > Setting > Languages & Frameworks > Compass
Now setup File Watcher like in picture:
$ProjectFileDir$\public\themes\701 is full path to directory with config.rb file.
This will compile scss files to css directory as requested.