I am trying to use foundation sites in my project so I downloaded it using bower.
I have a gulp.config.js file which has the following code:
module.exports = function() {
// PATHS TO JS AND SASS
var GETPATHS = {
VENDOR: [
'bower_components/jquery/dist/jquery.min.js'
],
JS: [
'bower_components/foundation-sites/js/foundation.core.js',
'src/assets/**/*.js'
],
SASS: [
'bower_components/foundation-sites/scss',
'src/assets/scss/components'
]
}
return GETPATHS;
}
and my gulpfile itself has this (SASS):
gulp.task('sass', function() {
return gulp.src('src/assets/scss/app.scss')
.pipe(sass({ includePaths: config.SASS }))
.pipe(autoprefixer())
.pipe(cssnano())
.pipe(gulp.dest('_build/assets/css'))
.pipe(browserSync.stream());
});
and here's my app.scss file
#import "foundation";
Now, the problem is I don't know why app.css (after getting compiled) is showing an empty file. The import "foundation" doesn't seem to work. Any help is appreciated as I am quite new to this. Thanks!
I suggest installing one of the Foundation Sites templates or using the foundation cli to bootstrap a project and get the needed file with all imports.
foundation.scss just contains the mixins.
You can see an example for the right config at https://github.com/zurb/foundation-zurb-template/blob/master/src/assets/scss/app.scss and https://github.com/zurb/foundation-sites-template/blob/master/scss/app.scss
Also see Gulp & Foundation 6 not compiling
Related
I try to create a simple rollup app's config and have some troubles with css.
This is my css file:
#import "normalize.css";
#import "typeface-roboto";
html, body, #root {
height: 100%;
font-family: Roboto, serif;
}
body {
background: url('./images/background.jpg');
}
And all what i have is 3 errors about not found resources.
This is my config file:
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'
import replace from 'rollup-plugin-replace'
import postcss from 'rollup-plugin-postcss'
import html from 'rollup-plugin-fill-html'
import url from "rollup-plugin-url"
process.env.NODE_ENV = 'development'
const CWD = process.cwd()
const Paths = {
SRC: `${CWD}/src`,
DIST: `${CWD}/dist-rollup`,
NODE_MODULES: `${CWD}/node_modules`
}
Object.assign(Paths, {
INPUT: Paths.SRC + '/index.js',
OUTPUT: Paths.DIST + '/index.js'
})
export default {
input: Paths.INPUT,
output: {
file: Paths.OUTPUT,
format: 'iife', // immediately-invoked function expression — suitable for <script> tags
// sourcemap: true
},
plugins: [
html({
template: `${Paths.SRC}/template.html`,
filename: 'index.html'
}),
postcss({
modules: true,
plugins: [
]
}),
url({
limit: 10 * 1024, // inline files < 10k, copy files > 10k
}),
resolve(), // tells Rollup how to find date-fns in node_modules
babel({
exclude: 'node_modules/**'
}),
commonjs(), // converts date-fns to ES modules
replace({ 'process.env.NODE_ENV': JSON.stringify('development') })
]
}
I was tried to use some plugins like rollup-plugin-rebase and postcss-assets, but unfortunately, it did not help me.
Maybe i chose not common way, but single working solution for me is use postcss with 2 plugins: postcss-imports for #import syntax and postcss-url for url.
But there were difficulties too.
Postcss-url don't want just work, like i expect.
I had to use 3 instance of this plugin:
[
postcssUrl(), // Find files' real paths.
postcssUrl({
url: 'copy',
basePath: 'src',
useHash: true,
assetsPath: 'dist'
}), // Copy to required destination.
postcssUrl({
url (asset) {
const rebasedUrl = `dist/${path.basename(asset.absolutePath)}`
return `${rebasedUrl}${asset.search}${asset.hash}`
}
}) // Fix final paths.
]
You may see it in complex on https://github.com/pashaigood/bundlers-comparison
And of course, i will be glad to see more simple solution if you know that, please, share with me.
I've found css-import to work well, the NPM package provides a cssimport command line interface that accepts a main CSS file which includes #import statements and an optional list of directory in which to search for the CSS; it outputs to stdout the merged CSS which can be written to a single file.
I use the following to output a single main.css file in my build directory, searching for imported files under node_modules:
cssimport main.css ./node_modules/ > ./build/main.css
When using rollup you can use the rollup-plugin-execute plugin to execute a shell command as part of rollup's build process. For example:
plugins: [
...
execute('npx cssimport main.css ./node_modules/ > build/main.css')
]
I'm using Gulp to bundle all my dependencies CSS files, including Bootstrap into on file.
However when I minify the bundled file I loose the bootstrap unicode.
So for a non-minify bundle I can see the glyphicon styling:
.glyphicon-star:before {
content: "\e006";
}
But in the minified bundle the glyphicon styling becomes this:
.glyphicon-star:before{content:""}
My gulp code is the following:
var gulp = require("gulp"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin");
...
gulp.task("min:css", function () {
var tasks = getBundles(regex.css).map(function (bundle) {
return gulp.src(bundle.inputFiles, { base: "." })
.pipe(concat(bundle.outputFileName))
.pipe(cssmin())
.pipe(gulp.dest("."));
});
return merge(tasks);
});
Any idea why this happens?
Okay, I found the root of the issue and it's not to do with gulp at all. To elaborate more, my setup for web development is VS2015 and in it they have an extension that will help bundle and minify the files and that extension is what causes the glyphicon to break.
One way to get around this issue is to configure the bundleconfig.json to create a separate minify file like this:
{
"outputFileName": "core/lib/dependencies.css",
"inputFiles": [
"core/lib/bootstrap/css/bootstrap.css"...
],
"minify": {
"enabled": false
}
},
{
"outputFileName": "core/lib/dependencies.min.css",
"inputFiles": [
"core/lib/bootstrap/css/bootstrap.min.css"...
],
"minify": {
"enabled": false
}
},
So just to recap - VS2015 will break glyphicon should you decide to bundle all your thirdparty css libraries!
I want to organize my HTML, JS, and LESS by module. I'm already using Grunt to compile *.js and *.html from my source folders.
So I configured grunt as follows:
grunt.initConfig({
less: {
ALL: {
files: { 'compiled.css': '**/*.less' }
}
}
}
But this runs into a major problem: constants and mixins from my /helper/*.less files are not accessible to other .less files.
It seems like grunt-contrib-less compiles each individual .less file, and then combines the output, but doesn't compile anything "globally".
The only solution I can think of is to create and maintain a master.less that #imports each individual .less file. But I'm trying to achieve an extremely modular build process, and I don't have to list any HTML or JS files, so I'm really hoping to find a *.less solution too!
Thanks to #seven-phases-max for the following answer!
less-plugin-glob
Allows you to use wildcards in #import statements! Works perfectly!
// master.less
#import "helpers/**/*.less";
#import "modules/**/*.less";
And all you need to add to your Grunt configuration is the plugins option:
// Gruntfile.js
grunt.initConfig({
less: {
'MASTER': {
src: 'master.less',
dest: 'master.css',
options: {
plugins: [ require('less-plugin-glob') ]
}
}
}
});
And, don't forget, npm install less-plugin-glob.
Here's one way to achieve an effortless development experience.
However, it requires a generated file and a custom task.
Auto-generate the master.less file
Create a task that generates master.less by writing an #import statement for each *.less file:
grunt.registerTask('generate-master-less', '', function() {
generateFileList({
srcCwd: 'modules',
src: '**/*.less',
dest: 'less/master.less',
header: '// THIS FILE IS AUTOMATICALLY GENERATED BY grunt generate-master-less\n',
footer: '// THIS FILE IS AUTOMATICALLY GENERATED BY grunt generate-master-less\n',
template: '#import "<%= filename %>";\n',
join: ''
});
});
function generateFileList(options) {
var _ = grunt.util._;
var files = grunt.file.expand({ cwd: options.srcCwd }, options.src);
var results = files.map(function (filename) {
return _.template(options.template, { 'filename': filename });
});
var result = options.header + results.join(options.join) + options.footer;
grunt.file.write(options.dest, result);
}
Then, use grunt-contrib-less to just build master.less.
I'm using Webpack with the extract-text-webpack-plugin.
In my project, I have some build scripts. One of the build scripts is supposed to bundle and minify CSS only. As I'm using Webpack for the other scripts, I found it a good idea to use Webpack even when I only want to bundle and minify CSS.
It's working fine, except that I can't get rid of the output.js file. I don't want the resulting webpack output file. I just want the CSS for this particular script.
Is there a way to get rid of the resulting JS? If not, do you suggest any other tool specific for handling CSS? Thanks.
There is an easy way, no extra tool is required.
There is an easy way and you don't need extra libraries except which you are already using: webpack with the extract-text-webpack-plugin.
In short:
Make the output js and css file have identical name, then the css file will override js file.
A real example (webpack 2.x):
import path from 'path'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
const config = {
target: 'web',
entry: {
'one': './src/one.css',
'two': './src/two.css'
},
output: {
path: path.join(__dirname, './dist/'),
filename: '[name].css' // output js file name is identical to css file name
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('[name].css') // css file will override generated js file
]
}
Unfortunately, that is currently not possible by design. webpack started as a JavaScript bundler which is capable of handling other "web modules", such as CSS and HTML. JavaScript is chosen as base language, because it can host all the other languages simply as strings. The extract-text-webpack-plugin is just extracting these strings as standalone file (thus the name).
You're probably better off with PostCSS which provides various plugins to post-process CSS effectively.
One solution is to execute webpack with the Node API and control the output with the memory-fs option. Just tell it to ignore the resulting js-file. Set the output.path to "/" in webpackConfig.
var compiler = webpack(webpackConfig);
var mfs = new MemoryFS();
compiler.outputFileSystem = mfs;
compiler.run(function(err, stats) {
if(stats.hasErrors()) { throw(stats.toString()); }
mfs.readdirSync("/").forEach(function (f) {
if(f === ("app.js")) { return; } // ignore js-file
fs.writeFileSync(destination + f, mfs.readFileSync("/" + f));
})
});
You can clean up your dist folder for any unwanted assets after the done is triggered. This can be easily achieved with the event-hooks-webpack-plugin
//
plugins: [
new EventHooksPlugin({
'done': () => {
// delete unwanted assets
}
})
]
Good Luck...
I've got Bourbon and Neat installed via Bower (in the /bower-components folder) and I was wondering if I am able to call them in my .scss files like so, using Gulp.
#import 'bourbon';
I've just switched over from Grunt and was wondering if Gulp had a similar loadPath option. I'd normally use this to reference that Bower directory in my Gruntfile.js, like below:
sass: {
dist: {
options: {
style: 'expanded',
loadPath: '<%= app %>/bower_components/foundation/scss'
files: {
'<%= app %>/css/app.css': '<%= app %>/scss/app.scss'
}
}
}
Any help with this would be appreciated. Thanks in advance!
I ended up using gulp-ruby-sass, that while is a bit slower than gulp-sass is rich with features, such as loadPath.
Let me show you an example installing bootstrap, Install gulp-ruby-sass but before that make sure you have ruby installed first:
npm install gulp-ruby-sass --save-dev
In gulpfile.js define the process:
var sass = require('gulp-ruby-sass')
gulp.task('processSCSS', function () {
return sass('./path/to/scss/you/mention/#important/main.scss', {
style: 'compressed',
loadPath: [
'./path/to/scss',
'./path/to/bower_component/bootstrap-sass/assets/stylesheets'
]
})
.on('error', sass.logError)
.pipe('./path/to/dest/stylesheets/')
});
In main.scss just call stylesheet:
#import 'bootstrap'