So I have created a pretty default keystoneJS project and the first error that appeared was that when ran locally the website's default css won't load.
It's looking for site.min.css but in the folder there is only site.scss
After I compiled the scss via sublime text 2 sublimeBuild and renamed the file to site.min.css (from site.css) it ran perfectly but what worries me is why does the default installation have this error.
Where should I change this? Is there an scss builder included so I have to change folder naming or is there some other issue?
My guess is that it has something to do with some step skipped. I remember the keystone installation asked me whether I wanted to use sass so I suppose everything should be ok.
Is the problem because I did not use grunt somehow?
I recall reading somewhere that this grunt tool has to be used instead of node when running a server and I see a Gruntfile in my folder but when installed grunt-cli the grunt just loads and terminates the server right after that.
You don't have to do anything, sass-middleware is included and automatically generates CSS files from your SASS source files when they're requested.
The issue you were experiencing with site.min.css not being found was an error in the yeoman generator, from when the SASS support was added. The LESS middleware automatically compresses generated CSS when a request is made for a file ending in .min.css, but the SASS middleware doesn't do the same, so the request was 404'ing.
The problem with the yeoman generator has been fixed as of version 0.2.9, for existing projects the simple fix is to change your layout file so it refers to site.css instead of site.min.css.
Once you do that the middleware will automatically detect the presence of site.scss and generate an up-to-date version of site.css for you.
Related
I've got quite some experience in (web) development (Java, ASP.NET and PHP amongst all), and fairly new to React and Node JS.
Although I did multiple tutorials and read multiple articles, I feel like I'm missing some point here and there. Currently I'm working on a React app which implements a nice HTML template I found.
One React tutorial I did used Webpack for building and deploying the app (local). This works nice, does the job of transpiling ES6 (.jsx) and SASS using babel. So far so good :)
My template has an image slider (Owl Carousel), so I installed the react-owl-carousel module.
This gave me quite some problems with jQuery (also installed as a module).
After several attempts to fix this I decided to move on to another slider module, React Awesome slider.
I used the module as the README.md explained. But upon building it (npm run build), I got an error that the .scss file within react-awesome-slider could not be transpiled. A message like "are you missing a loader".
So I installed sass, node-sass, sass-loader etc etc and configured these in my webpack.config.js.
I also noticed the react-awesome-slider module within node-modules contained a webpack.config.js.
Long story so far, sorry, now to the essence of this question.
In what way can the modules installed (like react-awesome-slider) be considered "black boxes"?
It doesn't feel logical that all the modules get build when building the main app. The "exclude: /node_modules/," config in webpack.config.js prevents this, not?
So why does the react-awesome-slider give an error about .scss transpiling? I had no .scss rule in my webpack config then.
Will all dependend modules automatically get installed when installing a new module? So when I run "npm i react-awesome-slider --save-dev", will its dependencies also be installed? Or is this not necessary? And do I need to update (webpack) configuration after installing a new module? Or is it really black box and "self-containing"?
Any help would greatly be appreciated!!! Maybe there is a good react-webpack sample app on Github or something like that?
That also confusing me for a really long time. Here are some answers to your question.
people publish packages to the NPM, so a module your project depends on
can be pre-builded or source code, it depends. I have checked react-awesome-slider, it's main field in package.json is dist/index.js, directly import it won't cause an issue because there are no SCSS files.If you follow the CSS module usage instruction you have import react-awesome-slider/src/styles and you will find src/styles.js file import ../styled.scss,so webpack will load it with SCSS loader which you have not configured, that's why an error occurred.
while you install modules, npm will go
through its dependency tree, install its dependencies, dependencies'
dependencies, until there's no more dependency module to install. before npm 3.0 the node_module folder is tree structure reflects the dependency tree, but it causes problems that many modules relay on the same dependency, npm will download and save too many same files, after version 3.0 it becomes flat(release note here, search flat keyword).
You don't need to update your webpack config after you install a dependency cause webpack build process will handle it with file dependency tree. You have installed a package and import it in your activation code, file there will be handle( with its package.json main field file as an entry), you have installed a package without using it or import it in a dead file(dead file means you cannot find it from webpack entry file), it will be ignored by webpack as it's dead code.
I have too many confuse until I read npm docs. Good luck to you.
Node modules are build to execute packages.When the are compiled they have proper configuration to handle extensions that are imported in it and when you import something like .scss in your main app then it does not know about that extension then your webpack need rules to include that extensions.
It does exclude node_modules as the are pre-converted pr pre build.
More over webpack is bit tough so developers create CRA Have look at it.
The "deployment process" in our company (if you can even call it that) is that you usually (not always) make the site locally, then upload it to the server and after that do all changes on live server (yep...).
I am trying to push SASS in our company, but my boss basically told me that if there isn't a way for it to autocompile after a change has been made on the server, I can just throw away all my work reworking our styles to SASS and go back to pure CSS.
Here is folder structure sample of our server (we do have multiple sites running on same machine, they're all in separate sub-folders, but not all of them have frontends):
var/www/our_system/project_name1/web-frontend/frontend_name1
var/www/our_system/project_name1/web-frontend/frontend_name2
var/www/our_system/project_name2/web-frontend/frontend_name1
var/www/our_system/project_name3/web-frontend/
The frontend_nameX contains a style folder which contains folders scss and css (where I want to autocompile contents of scss into the css folder).
So, the question again:
Is there a way, to have SASS permanently watch over any sass file changes and compile them to a css folder relative to the sass folder the compiled file was in (as my boss doesn't want to run watch command for every single website)? Also, it would be amazing if it could also run the CSS through Autoprefixer.
Thanks.
Ps.: We are using our own custom CRM/CMS written in PHP, there are no other frameworks etc. Front-ends are also written in PHP and HTML (no react, node, anything of sorts). Our server runs on Debian Jessie (and for PHP we use Apache).
Ps.2: Please, do not tell me that we are doing it wrong etc. I KNOW, but I can't do anything about it.
Edit:
I got my boss to try and install Gulp on our server to take care of this, but the installation itself actually failed.
The node was installed fine, same with npm (well, I think it threw some warnings, but got installed), but gulp just threw warnings and errored out (it installed fine globally, but died when installing for the project)...
The new question is, is the gulp way to go?
All we need is something that autostarts and keeps watching all scss files and parses them when they change.
Thanks.
I know that could be multiple answers for this question but I would know how i can fast setting up project with Bootstrap and Sass.
I had never used node, npm, grunt or bower, I've installed all already but i can't really find a good tutorial for:
Setting up the project structure
Auto compile sass files on save
(Maybe) Live reload in chrome?
I would suggest not using any boilerplate for your first project as you want to get into the "guts" of it, and once you are familiar with basics, then you can try boilerplate and see what they can do for you.
Few tools you would need to setup a project from scratch includes: Node's npm, Bower, Gulp (for example).
After you have those installed, you can dig in into creating your first project.
1) Initialize your npm project
2) Pull the packages with Bower (Bootstrap scss for starters)
2a) Pull the Specific Bootstrap 3 SCSS port
3) Configure Basic Gulp-scss config for your SCSS needs.
Basic idea behind Bower is that you have unmodified source of plugins/3rd party js/css in bower_components folder, and you use those files to compile a production ready files (js/css). What this means is that your bower_components folder is a "src" folder, and you have to add your "dist" or distributable files. Gulp helps with this part.
For the project structure, further readings and improvements on gulp tasks.
Once you have basic working project, you can try expanding your gulp-config with, like you mentioned Browser Sync and others.
I did compile a "general tasks" gulp file that i use from project to project. You can take a look here and use it if you find it fits.
Hope it helps.
You can try using Aldryn's boilerplate:
https://github.com/aldryn/aldryn-boilerplate-bootstrap3
Documentation
I'm very new to using npm and TypeScript so I'm hoping that I'm missing something obvious. We have authored a node package written in TypeScript for our own internal use. So, the source is written in Typescript, and the file structure looks like this:
src/myModule.ts
myModule.ts
Where myModule.ts looks like this:
export * from "./src/myModule";
I then run tsc to generate .js and .d.ts files. So, the files then look like this:
src/myModule.js
src/myModule.ts
src/myModule.d.ts
myModule.js
myModule.ts
myModule.d.ts
All of this gets pushed to git and then our main app includes this package as a dependency via a git URL. When I first attempted this, I got an error like this:
export * from "./src/myModule";
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
After some searching around, I found that the issue was with the .ts files that were getting loaded in. So I added the following to my .npmignore:
*.ts
!*.d.ts
After doing this, it brings in the node package without any problems.
The problem I am running into is that I want to be able to run off of local changes to the node package during active development. I want to be able to make changes in the node package, and then have the main app pick up these changes so that I can make sure everything works together before pushing to git. Everything I find says to use npm link. This makes it point to my local directory as expected, but the problem is that it now has all the .ts files, and the same errors show up.
I'm sure npm link works great when everything is written in JavaScript, but we are using TypeScript to write everything. Is there a way to make this work with TypeScript?
This makes it point to my local directory as expected, but the problem is that it now has all the .ts files, and the same errors show up.
The errors will only show up if you have those .ts files and a seperate declaration for those files.
Recommended fix
Just use the seperate .ts/.js/.d.ts files and steer clear of bundling a single .d.ts.
With the default version of sails on npm (v.9?) --linker works ok i.e. creates /linker folder. I can copy js, css files to assets/linker/ and they appear in layout.ejs automatically.
I now have sails v0.10 installed both locally and globally. Using Node V0.10.25.
I created a new sails project using:
sails new project_name --linker
but no /linker folder is created.
I had to create /.tmp as it did not exist
I had to create /.tmp/public/linker/ to put /js & /styles
and add them manually into layout.ejs
I renamed Gruntfile.js and my program still works thus Gruntfile does nothing in the program.
Sails v0.10 no longer uses the linker folder--it was just causing confusion. If you have the linker option enabled, then any assets under your assets folder will be copied over to your .tmp/public folder by Grunt when Sails is lifted. The public folder will be created by Grunt as necessary. The grunt-sync task will then keep the folders synced as long as the program is running.
Sails projects are not dependent on Grunt, so renaming the Gruntfile (or removing it completely) won't stop the program from working, but that doesn't mean it's not doing anything when it's there! To see what Grunt is up to, you can lift Sails with sails lift --verbose.
As an add-on to sgress454's answer, the reason a .tmp folder is created is so that files like the ejs and less files can be compiled into formats that your browser will understand. It's similar to the way that when you compile Java, it converts to Java bytecode (just an analogy, definitely not the same process).There doesn't necessarily have to be any .tmp folder when you're not running the server though; this is something Grunt creates and is what the browser reads from. Hope this clarifies things a bit more.