I have setup a uncss grunt task.
my html files are in the 'public' folder
my css ares in 'public/css'.
I setup my grunt task like so:
uncss: {
dist: {
files: {
'faq.min.css' : ['public/faq.html']
}
}
}
I get an error saying:
Fatal error: UnCSS: could not open /css
I do import my css like so in my html page:
<link href="css/faq.min.css" rel="stylesheet" />
I've tried setting up htmlroot, csspath, but nothing seems to work.
if I set
csspath: 'css'
it adds an extra css to the path.
/homepage/public/css/css/faq.min.css
anyone can help?
Related
Is it possible to import css-files to a separate layout so that styles are applied only to one layout without affecting others?
I found this solution.
Rename ".css" files to ".scss".
In your layout add the wrapper block with custom class "my-class".
layouts/AuthLayout:
<template>
<div class="auth-layout">
<section>
<Nuxt/>
</section>
</div>
</template>
Then add a style section. This uses SCSS features and the v-deep directive.
layouts/AuthLayout:
<style scoped lang="scss">
.auth-layout {
&::v-deep {
#import '~assets/path/to/style.scss';
#import '~assets/path/to/custom.scss';
// ...
}
}
</style>
I hope it would be helpful for somebody.
If your style files have .css extension you can put them on static directory and address in your layout head function or object in this way (my file is in static/css/main.css directory)
return {
link: [
//you shouldn't mention ~/static itself
{ rel: 'stylesheet', href: '/css/main.css' },
],
};
if your file has .scss extension or any other preprocessor you can put it in assets directory cause webpack compile files on this directory.
my dir looks like that :
|-project
-gulpfile.js
|-build
-index.html
|-js
-app.min.js
-vendors.min.js
|-styles
-all.css
-vendors.min.css
i inject the css and js files with this gulp task:
gulp.task('index',function () {
return gulp.src('src/index.html')
.pipe(inject(gulp.src(['**/vendors.min.css','**/vendors.min.js','**/app.min.js','**/all.css'], {read: false})))
.pipe(gulp.dest('build'))
.pipe(livereload());
})
i set up a local server with node.js,when i do the request , the html file loads up,but the .js and .css files dont connect for some reason.Although when i check page's source code at output their paths are written in.
<!-- inject:css -->
<link rel="stylesheet" href="/build/styles/vendors.min.css">
<link rel="stylesheet" href="/build/styles/all.css">
<!-- endinject -->
when i hover on one of them it shows :
http://localhost:5000/build/styles/all.css
i use this task for setting the server :
gulp.task('connect', function() {
connect.server({
root: 'build',
livereload: true,
port: 5000
});
});
EDIT
any recommendation about how to make it on hovering look like
localhost:5000/styles/all.css
If the build folder is the root of the server, you shouldn't be including it in the path of the js and css files. This is failing because you are trying to reference a build folder inside the build folder.
Change your injection of css to the following:
<link rel="stylesheet" href="styles/vendors.min.css">
<link rel="stylesheet" href="styles/all.css">
I'm trying to get Bower to work within my Drupal projects. In the root of my project I have a bower.json and .bowerrc file.
Bower components are being installed in sites/all/themes/mytheme/libraries.
I've setup grunt-wiredep to automatically inject my bower components in my html.tpl.phpfile, like this:
wiredep: {
task: {
src: 'sites/all/themes/mytheme/templates/html.tpl.php'
}
}
When using grunt wiredep, the plugin injects the following path to my index.tpl.php file:
<script src="../libraries/jquery/dist/jquery.js"></script>
Where it should be this:
<script src="sites/all/themes/mytheme/libraries/jquery/dist/jquery.js"></script>
I've tried adding directory: 'sites/all/thems/mytheme'; to the wiredep task, but then I get the error that my dependencies are not installed.
Anyone can help me out?
It seems I got it working now. Here's what I did:
1) I ignored the first part of the path: ../
2) For html files, I replaced the references to the js and css dependencies. I added sites/all/themes/mytheme/ to the path.
Here is what my wiredep task now looks like:
wiredep: {
task: {
src: 'sites/all/themes/mytheme/templates/html.tpl.php',
ignorePath: '../',
fileTypes: {
html: {
replace: {
js: '<script src="sites/all/themes/mytheme/{{filePath}}"></script>',
css: '<link rel="stylesheet" href="sites/all/themes/mytheme/{{filePath}}"/>',
}
}
}
}
}
I want to add a grunt task (specifically angular-template) to my lineman application.js file. There is some documentation found here and here. However, it just tells me to add the grunt task to loadNpmTasks. The problem is that from a fresh project created using lineman, my application.js file does not have a loadNpmTasks array, nor do the comments point out where I should put it. Both examples I have found in the documentations do not show what the application.js file should look like in it's entirety.
The application.js file should look something like this (obviously the src/dest options are not configured correctly:
module.exports = function(lineman) {
return {
loadNpmTasks:['grunt-angular-templates'],
ngtemplates: {
app: {
src: '**.html',
dest: 'templates.js'
}
}
};
};
Then to run the task:
lineman grunt ngtemplates
I am using cssmin on files containing #imports. cssmin is recursively importing local files correctly, but for imports that point to a URL the imports are left inline. This makes the resulting minified CSS invalid because # rules must be at the beginning of the file. Does anyone know a good solution or workaround to this problem?
I have exactly the same problem with cssmin and #import, and i found a solution with grunt concat:
Create a concat grunt task that:
Put #import url in the begining of mified css file and replaces references of #imports url for "".
Execute task concat:cssImport after cssmin task.
Grunt task Code: to execute (concat:cssImport)
grunt.initConfig({
concat: {
cssImport: {
options: {
process: function(src, filepath) {
return "#import url(http://fonts.googleapis.com/css?family=Roboto:400,300,900);"+src.replace('#import url(http://fonts.googleapis.com/css?family=Roboto:400,300,900);', '');
}
}
},
files: {
'your_location_file_origin/file.full.min.css': ['your_location_file_destination/file.full.min.css']
}
} )}
My inspiration comes from https://github.com/gruntjs/grunt-contrib-concat#custom-process-function.
I added the processImport: false option to grunt.
'cssmin': {
'options': {
'processImport': false
}
}
Use the following process:
Install node-less
import the files by compiling with less first
minify with cssmin
References
node-less
LESS compile error
I had something like this in the styles.scss:
#import url(custom-fonts.css);
My problem was the #import wasn't able to find the files because the root path was missing. Here's what I did with yeoman angular generator Gruntfile.js config:
cssmin: {
options: {
root: '<%= yeoman.dist %>/styles/'
}
},
Useful link grunt-contrib-cssmin issue #75
I know this question for a very long time but i post this for anybody that looking for this issue on stack overflow ... just put your code in /!..../ like this:
/*! * #import url('//fonts.googleapis.com/cssfamily=Roboto:300,400,400i,500,700,700i'); */
it will be include in your destination min css but don't forget to use remote import in top of your page.
Putting the imports at the top of my scss didn't work for me,I ended up importing the external stylesheets directly from the html:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300"
rel="stylesheet">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
......
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/app.css -->
<link el="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="styles/app.css">