I have multiple scss file those all imported in another scss file name style.scss. Now i need all the scss compile to css and use all of my components. How it is posible?
I have followed this link Followed Instruction
Can any one help me please
You can install the following dev dependencies:
"devDependencies": {
"node-sass": "^4.1.1",
"sass-loader": "^3.2.3",
"style-loader": "^0.13.1"
}
And import your scss file inside your App.vue:
<style lang="scss" scoped>#import 'style.scss'</style>
Related
I'm using 11ty to build a static website and I'd like to use Sass. To do this I've used eleventy-plugin-sass. It does compile the Sass code into a CSS file, but it copies the input hierarchy to the output.
For example, in my input folder I have the following hierarchy:
input/
_includes/
img/
posts/
src/
scss/
partials/
main.scss
and when I run npx #11ty/eleventy it compiles into this:
output/
img/
posts/
input/
src/
scss/
main.css
index.html
I would like to have something like
output/
img/
posts/
css/
main.css
index.html
Is this possible using eleventy-plugin-sass? If not, what would be another way to achieve this?
I just released a new version (1.1.0) of eleventy-plugin-sass and there you can customize the output directory with the new parameter outputDir
Check out these. I set up the package.json scripts based on that, and it works as expected, actually, I copy here my script due some minor changes/extensions:
https://egghead.io/lessons/11ty-add-sass-compiling-and-watch-for-changes-in-eleventy-11ty
https://mvolkmann.github.io/blog/eleventy/styling-with-sass/
{
"name": "eleventy-from-start",
"version": "0.0.0",
"description": "A simple Eleventy starter",
"scripts": {
"build": "npm run sass && eleventy",
"sass": "sass src/assets/css/main.scss:_site/assets/css/main.css --load-path=node_modules",
"serve": "npm-run-all sass --parallel watch:*",
"watch:eleventy": "eleventy --serve --port=4300",
"watch:sass": "npm run sass -- --watch"
},
....
in the documentation of cookiecutter-django relating to SASS Compiling and Live Reload it's stated that I only have to enter "npm start" (after installing npm of course) in the main project folder to enable Live-Reload and SASS compiling. I was wondering how this should be possible without a package.json file but tried it nevertheless, maybe some hidden thing I did not know about. But npm init of course told me that a package.json was missing. I initialized a new project with bootstrap compilation and gulp enabled, same outcome. Still no package.json. Am I missing some key-point? Or is the documentation in this case maybe incomplete? Where do I get the required package.json from? :)
In the project generation at the beginning, you probably chose "None" on the "js_task_runner" step. If you chose "Gulp" here, it will generate gulpfile.js and package.json file, after which you'll be able to use npm install.
As mentioned in other answers, when you start your project and then choose none for task runner options, it will not work. See js_task_runner on cookiecutter-django documentation.
May I ask where you tried to run npm install? The package.json file is located in the root of your app, so you have to run commands from there.
It should be possible to add the needed files afterwards manually. Create a package.json file in the root directory of your app and add following code. Important: Change name to the name of your app.
{
"name": "CHANGE_TO_NAME_OF_YOUR_APP",
"version": "0.1.0",
"dependencies": {},
"devDependencies": {
"bootstrap": "4.1.1",
"gulp-concat": "^2.6.1",
"jquery": "3.3.1",
"popper.js": "1.14.3",
"autoprefixer": "^9.4.7",
"browser-sync": "^2.14.0",
"cssnano": "^4.1.10",
"gulp": "^4.0.0",
"gulp-imagemin": "^5.0.3",
"gulp-plumber": "^1.2.1",
"gulp-postcss": "^8.0.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^4.0.2",
"gulp-uglify-es": "^1.0.4",
"pixrem": "^5.0.0"
},
"engines": {
"node": ">=8"
},
"browserslist": [
"last 2 versions"
],
"scripts": {
"dev": "gulp"
}
}
Since this project uses gulp.js as task runner you need additionally to the package.json also a gulpfile.js file. Code from this example should work. Check also if you have a scss file in name_of_your_app/static/sass/project.scss.
Now you should be able to run npm install in a first step and compile scss with npm run dev in a second step (see documentation).
Currently, my package.json contains somes dev dependencies :
...
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"font-awesome": "^4.7.0",
"jquery": "^2.1.4",
"laravel-mix": "0.*",
"lodash": "^4.17.4",
"unslider": "^2.0.3",
"vue": "^2.3.2"
},
...
When I first compiled all dependencies with npm run dev, eveything worked fine.
Then, I tried to install some others dependencies like unslider, as you can see. But now, I cannot understand why this package is not compiled in my app.js / app.css. I am missing something ?
after review the package in github, you have to add this:
In resources/assets/sass/app.scss:
#import "node_modules/unslider/src/scss/unslider.scss"
In resources/assets/js/app.js:
require('unslider');
I've configured my Angular app with Yeoman, and have included many JS libraries like d3. The application works fine when I use grunt serve to see the app. But when I try to build it using grunt build, and open the generated index.html, the app breaks because it cannot find D3. If I manually include the script tag for loading D3 in final index.html, then it starts working, but that's not how it's supposed to work, right?
The grunt build also removes google Fonts which I've included in my app:
<link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
This link tag is missing from final index.html
My bower.json looks like this:
{
"name": "myApp",
"version": "0.0.0",
"main": "index.html",
"ignore": [
"**/.*",
"node_modules",
"bower_components"
],
"dependencies": {
"jquery": "~2.2",
"lodash": "~4.9",
"bootstrap": "^3.3.6",
"angular": "~1.5",
"angular-route": "~1.5",
"angular-animate": "~1.5",
"angular-resource": "~1.5",
"angular-cookies": "^1.5.7",
"angular-mocks": "~1.5",
"angular-bootstrap": "~1.3.1",
"moment": "~2.12",
"less.js": "~2.6",
"font-awesome": "~4.5",
"d3": "^3.5.17"
}
}
I have not tested the issue with other libraries, as they might also be not working after the build. However, angular, bootstrap, font-awesome and LESS is working fine. This is driving me crazy!
I noticed that I was using dom_munger task in gruntfile. It removed all script with data-concat="false".
D3 script was being removed because it specified data-concat="false".
The problem is fixed now.
I am developing a browser application using a combination of the following npm build tools
Browserify
Coffeeify
Watchify
The scripts part of my package.json file is:
"scripts": {
"build": "browserify -t coffeeify init.coffee -o ../www/bundle.js",
"watch": "watchify -t coffeeify init.coffee -o ../www/bundle.js"
}
So far, I have configured my project so that before I start working on it, I enter the "npm run watch" command and all CoffeeScript files are automatically bundled into the bundle.js file whenever I update one. Now, I additionally want to have several .SCSS files that get automatically compiled into .CSS files and then all bundled and minified into a min.css file. And, ideally I want to accomplish this without having to enter commands other than then one I'm already entering for my CS files ("npm run watch").
Here are my package.json devDependencies:
"devDependencies": {
"coffee-script": "^1.10.0",
"coffeeify": "^2.0.1",
"browserify": "^12.0.1",
"watchify": "^3.6.0",
"node-sass": "^3.4.2",
"yuicompressor": "^2.4.8"
}
So far, I am at the point where I am successfully compiling my .SCSS files into .CSS files using PhpStorm's file watcher and the node-sass npm module. After some reading, I decided to use the yui compressor (it's installed as a Node module too, as you can see above). However, after a lot of searching, I couldn't find a good description of how to do this.
Am I supposed to update the:
"watch": "watchify -t coffeeify init.coffee -o ../www/bundle.js"
line in my package.json file? If so, how?
I want the final result to be such that whenever a file from the SCSS folder is changed, the min.css file in some other folder is automatically recompiled.
(I don't necessarily insist on using the yui compressor, if there is a better option for my purposes.)