I am working with Pug and I wanted to create some mixins to make some reusable components across whole project. I wanted to create some files just to make mixins separated and categorised. The problem occurs when I want to include file with mixins into my main file. For example:
body
block content
include ./components/mixins/_mixins.pug
+user_avatar('', '#', 'Daniel')
This does not work (when I want to include mixins from separate file). I got this error: jade_mixins.user_avatar is not a function
But when I include mixin in the file it works:
body
block content
mixin user_avatar(avatar_url, profile_url, name)
.user(class='4u 6u(small) 12u(xsmall)')
a(href=profile_url)
.user-avatar-thumbnail.is-active(style="background-image: url('" + avatar_url + "')")
if name
span.user-name=name
+user_avatar('', '#', 'Daniel')
Any clue what to do to fix it? And yeah, the path is correct. To compile pug I use the laravel-elixir-jade package for laravel's elixir.
I've tried to reproduce your issue, but on my machine, it seems to work just fine. I'm listing the setup I made for this below, maybe you can find the point where yours deviates from this one.
My directory structure:
|- html/
|--- template.html (generated after running gulp)
|- node_modules/
|- views/
|--- mixins/
|----- util.pug
|--- template.pug
|- gulpfile.js
|- package.json
My package.json:
{
"name": "test",
"version": "1.0.0",
"main": "gulpfile.js",
"license": "MIT",
"dependencies": {
"gulp": "^3.9.1",
"laravel-elixir": "^6.0.0-15",
"laravel-elixir-pug": "^1.3.2",
"pug": "^2.0.0-beta6"
}
}
My template.pug:
body
block content
include mixins/util
+test()
The util.pug file:
mixin test()
p Test
And the gulpfile.js:
var elixir = require('laravel-elixir');
require('laravel-elixir-pug');
elixir(function (mix) {
mix
.pug({
blade: false,
src: './views',
search: '**/*.pug',
pugExtension: '.pug',
dest: './html'
});
});
After running gulp in the root directory, this produces the following template.html, as expected:
<body>
<p>Test</p>
</body>
Related
I have a PHP project (WordPress theme) with Vite and PostCSS to bundle my JS and CSS files.
The output directory is build and everything worked, but as soon as I import fonts or images in my CSS, Vite copies them into the build folder and changes the paths in the source.
File structure:
styles
|- tailwind.css
|- fonts
|- fa-brands-400.eot
|- fa-brands-400.woff
|- fa-brands-400.woff2
|- fa-brands-400.svg
|- fa-brands-400.ttf
js
|- index.js
vite.config.js
...
In my tailwind.css, I'm importing the font:
#font-face{
font-family:"Font Awesome 5 Brands";
font-style:normal;
font-weight:400;
font-display:block;
src:url(../styles/fonts/font_awesome/fa-brands-400.eot);
src:url(../styles/fonts/font_awesome/fa-brands-400.eot?#iefix) format("embedded-opentype"),url( ../styles/fonts/font_awesome/fa-brands-400.woff2) format("woff2"),url(../styles/fonts/font_awesome/fa-brands-400.woff) format("woff"),url(../styles/fonts/font_awesome/fa-brands-400.ttf) format("truetype"),url(../styles/fonts/font_awesome/fa-brands-400 .svg#fontawesome) format("svg")
}
The problem, Vite copied the imported font files to my build folder and my font import now looks like this (in build/tailwind.css:
#font-face{
font-family:"Font Awesome 5 Brands";
font-style:normal;
font-weight:400;
font-display:block;
src:url(/fa-brands-400.eot);
src:url(/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(/fa-brands-400.woff2) format("woff2"),url(/fa-brands-400.woff) format("woff"),url(/fa-brands-400.ttf) format("truetype"),url(/fa-brands-400.svg#fontawesome) format("svg")
}
Is there a way to disable this? I just want Vite to bundle my JS and CSS, but don't include my assets.
My vite.config.js looks like this:
import postcssImport from "postcss-import"
import tailwindcssNesting from "tailwindcss/nesting"
import tailwindcss from "tailwindcss"
import autoprefixer from "autoprefixer"
import postcssScss from "postcss-scss"
import { defineConfig } from "vite"
export default defineConfig({
build: {
outDir: "build",
cssCodeSplit: true,
emptyOutDir: true,
minify: false,
assetsDir: "",
rollupOptions: {
input: {
index: "js/index.js",
tailwind: "styles/tailwind.css",
},
output: {
entryFileNames: "[name].js",
assetFileNames: "[name].[ext]",
},
},
},
css: {
postcss: {
syntax: postcssScss,
plugins: [postcssImport, tailwindcssNesting, tailwindcss, autoprefixer],
},
},
clearScreen: true,
publicDir: false,
})
I am facing a similar issue with a library build. I want to have an image relative to my css file, but default it is placed at the root and the reference in the css file is also to the root (just like in your problem). I did not find a perfect solution, but I was able to place the image in the same folder as the css file, where the css file also references the image in the same folder. I used the rollup config option output.assetFileNames for this. You can pass your own function and in that function you can add the complete path to the folder where you want to add the asset.
assetFileNames: (assetInfo: PreRenderedAsset): string => {
if (assetInfo.type === 'asset') {
return 'styles/fonts/[name][extname]';
}
else {
return '[name][extname]';
}
},
This will place the fonts in the build/styles/font folder. The references in the css will also be in this folder.
There is one caveat: The references will begin with '/', so they will be from the root of the domain. I have not found a solution for this.
I'm new to bundlers and am currently learning about Fusebox. I really like it so far except that I can't figure out how to use it for a multi-page project. So far I've only been able to find a tutorial on how to do this using webpack, not for fusebox.
Input files in src folder:
index.html
index2.html
index.ts
Desired output in dist folder:
app.js
vendor.js
index.html
index2.html
Actual output in dist folder:
app.js
vendor.js
index.html
Here is my config in the fuse.js file:
Sparky.task("config", () => {
fuse = FuseBox.init({
homeDir: "src",
output: "dist/$name.js",
hash: isProduction,
sourceMaps: !isProduction,
plugins: [
[SassPlugin(), CSSPlugin()],
CSSPlugin(),
WebIndexPlugin({
title: "Welcome to FuseBox index",
template: "src/index.html"
},
WebIndexPlugin({
title: "Welcome to FuseBox index2",
template: "src/index2.html"
},
isProduction && UglifyJSPlugin()
]
});
// vendor should come first
vendor = fuse.bundle("vendor")
.instructions("~ index.ts");
// out main bundle
app = fuse.bundle("app")
.instructions(`!> [index.ts]`);
if (!isProduction) {
fuse.dev();
}
});
Setting WebIndexPlugin twice within plugins doesn't work. What is the correct way to set up a multi-html page project with fusebox?
The WebIndexPlugin can not be configured, to output more than one html file.
But if you don't use a hash for the generated bundles (e.g.: output: "dist/$name.$hash.js"), you don't need the WebIndexPlugin -- you can remove it completly from the plugins option. Because you already know the names of the generated bundles (vendor.js and app.js) you can just include the following lines
<script src="vendor.js"></script>
<script src="app.js"></script>
instead of the placeholder $bundles.
If you want, that both html files are copied from your src directory into your dist directory, you can add the following lines to your fuse.js script:
const fs = require('fs-extra');
fs.copySync('src/index.html', 'dist/index.html');
fs.copySync('src/index2.html', 'dist/index2.html');
Note: Don't forget to add fs-extra:^5.0.0 to your package.json
Might not been the case when the question was asked, but WebIndexPlugin now can be specified multiple times and also takes optional bundles parameter where list of bundles to be included in html can be specified (all bundles are included by default).
For example 2 html files (app1.html, app2.html) where each includes a common library (vendor.js), and different entry points (app1.js and app2.js)
app1.html
vendor.js
app1.js
app2.html
vendor.js
app2.js
Config would look like this:
const fuse = FuseBox.init({
homeDir : "src",
target : 'browser#es6',
output : "dist/$name.js",
plugins: [
WebIndexPlugin({
target: 'app1.html',
bundles:['vendor', 'app1']
}),
WebIndexPlugin({
target: 'app2.html',
bundles:['vendor', 'app2']
})
]
})
// vendor bundle, extracts dependencies from index1 and index2:
fuse.bundle("vendor").instructions("~[index1.ts,index2.ts]")
// app1 and app2, bundled separately without dependencies:
fuse.bundle("app1").instructions("!>index1.ts")
fuse.bundle("app2").instructions("!>index2.ts")
I'm trying to get Vue.js 2.0 typings working with TypeScript in Visual Studio. Previously, I had used these typings from DefinitelyTyped, but they are for Vue.js 1.0 and thus don't match up. However, they did work just fine and let me work with the Vue type.
I've since transitioned to using the typing files that come with Vue.js releases (here). I have included them in my project in my ~/Scripts/typings/vue folder, but my project does not understand them.
I've gathered that these typing files are meant to be used via import/export possibly? There are no other typing files I am using that work this way, so I am not sure how to correctly implement the typings such that they are available globally to my project.
I have a sample solution that shows an example of what I've tried - download here from my github repo.
Here's the structure of my Scripts folder:
_references.d.ts contents
/// <reference path="typings/vue/index.d.ts" />
vue_test.ts contents
namespace Test
{
export class MyClass
{
public initialize()
{
var component = this.getComponent();
}
private getComponent(): Vue.Component
{
return Vue.component("test", {
template: "<div></div>",
props: ["test"],
methods: {
onClick: () =>
{
}
}
});
}
}
}
What I would expect is that I would have access to the Vue.Component namespace and other namespaces that are declared in typings/vue/index.d.ts, but this does not seem to be the case.
I did attempt to import the exported class into global, like this:
import * as _Vue from "./index";
declare global
{
export class Vue extends _Vue
{
}
}
However, this only allows me to access the root Vue class, and thus I cannot do things like specify Vue.Component as a type, or any other namespace beyond Vue.
Other information:
Visual Studio 2015
Vue.js version 2.2.1
TypeScript version 2.1
UPDATE after suggestions from #unional
Here is my new folder structure:
No more _references.d.ts, using tsconfig.json instead. The tsconfig.json file contains this:
{
"compilerOptions": {
"sourceMap": true
},
"include": [
"../../**/*.ts"
]
}
The above imports all .ts files in the project. The ~/Scripts/typings/custom-typings/vue.d.ts file contains the following:
export * from "vue"
export as namespace Vue
Visual Studio tells me Cannot find module 'vue', so my typings are still not functional, although the tsconfig.json file works (I added the jQuery typing to verify that).
Here is a link to the updated solution showing the new problems: [link]
With NPM
Drop down to the command line in your app's root directory to use NPM and the TypeScript command line interface.
If you do not already have a package.json file, then first run npm init.
Then to install vue.js, run npm install --save vue.
To install its types run npm install --save-dev #types/vue.
If you also lack a tsconfig.json file, then run tsc --init.
At that point, you will be able to build by running tsc.
Without NPM
Not using NPM is unconventional and will require a lot of manual work. Here is one of those manual approaches.
Download VueJS 2.1.1 from the GitHub repo. After extracting the archive,
Put the contents of dist into Scripts/vuejs directory,
Put the contents of typings into typings/vuejs directory,
Add a tsconfig.json file to your project's root that his this content.
tsconfig.json
{
"compilerOptions": {
// ....... other properties omitted
"typeRoots": [
"./typings/"
],
"target": "es5",
"lib": ["es2015", "dom", "es2015.promise" ]
}
}
Then, at the top of the file that will be using Vue, add a relative import statement.
import * as Vue from "../typings/vuejs";
interface MyComponent extends Vue {
message: string
onClick (): void
}
export default {
template: '<button #click="onClick">Click!</button>',
data: function () {
return {
message: 'Hello!'
}
},
methods: {
onClick: function () {
window.alert(this.message)
}
}
}
Example
Here is an updated version of your WebApplication1 example.
https://github.com/bigfont/StackOverflow/tree/master/TypeScriptVueJsTypes
See also:
https://v2.vuejs.org/v2/guide/typescript.html
https://github.com/vuejs/vue
I was able to use information from #unional's comment, but with a slight change:
I added this to my custom-vue.d.ts file:
import * as _Vue from 'vue';
export as namespace Vue;
export = _Vue;
Additionally, I had to create a package.json file with the following:
{
"dependencies": {
"vue": "^2.2.1"
}
}
Finally, I needed to add a node_modules folder at the same scope as my tsconfig.json file. It has the following:
+-- node_modules
| +-- vue
| | +-- package.json
| | +-- types
| | | +-- index.d.ts
| | | +-- options.d.ts
| | | +-- plugin.d.ts
| | | +-- vnode.d.ts
| | | +-- vue.d.ts
package.json simple contains:
{
"typings": "types/index.d.ts"
}
And things are now WORKING
Edit
Alternatively, I discovered I could avoid the whole node_modules thing by setting tsconfig.json's property for moduleResolution to Classic. After doing that, I changed my custom-vue.d.ts import to look like this:
import * as _Vue from "../vue/index";
Since the error is at compile time, No big problem in it. you can use this plugin to for faster development from here
Also, the code should be as
import Vue from 'vue'
import Component from 'vue-class-component'
// The #Component decorator indicates the class is a Vue component
#Component({
template: ''
})
export default class MyComponent extends Vue {
}
and so on. You can still use the vuejs inside your cshtml files.
I'm completely new to webpack (been using gulp since... forever).
However, I've just decided to use webpack. Decided to go with webpack 2 (2.1.0-beta.20 currently).
Been looking all over, still couldn't do a simple task as "give webpack my bootstrap.scss file (which imports all other bootstrap partial scss files needed) and have returned bootstrap.custom.min.css and bootstrap.custom.min.css.map".
I have my own bootstrap.scss file which only imports what I need from bootstrap (not using all of it), but after a custom custom-variables.scss file imported at the top, to overwrite some default bootstrap variables - like colors, grid columns etc. Anyway, I'm sure this is not relevant... The issue is compiling scss to css with custom output file name and sourcemap.
Not that it would make any difference, but to start with, here's my custom bootstrap.scss:
#import "custom-variables"; // to overwrite default bootstrap variables
/**
* Twitter Bootstrap
* This is actually copy/paste from the original bootstrap file, just changed paths
*/
// Core variables and mixins
#import "../../../../node_modules/bootstrap/scss/variables";
#import "../../../../node_modules/bootstrap/scss/mixins";
// and so on... only what I need. I don't need tables, forms and a few other.
In addition to this, I also have my own style.scss for which I need to do the same (to have returned style.min.css and style.min.css.map).
As for my webpack.config.js file, this is all I have:
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const sassLoaders = [
'css-loader',
'postcss-loader',
'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, './dev')
];
const config = {
entry: {
'bootstrap.custom.min': ['./wp-bootstrap'], // this file only contains 1 line: require('./dev/css/overwrite/bootstrap/bootstrap.scss');
'style.min': ['./wp-style'], // this file also contains 1 line: require('./dev/css/style.scss');
},
module: {
loaders: [
{
test: /\.scss$/,
loader: 'file',
// or, other examples I've found said to use:
// loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loaders: 'css!sass' }),
// but if I try like that, I get: "Cannot read property 'query' of undefined"
query: {
name: '[name].css'
}
}
]
},
plugins: [
new ExtractTextPlugin('[name].css')
],
postcss: [
autoprefixer({
browsers: ['last 2 versions']
})
],
resolve: {
modules: [
path.resolve('./'),
'node_modules'
]
}
};
module.exports = config;
These are all the related packages I have installed:
"devDependencies": {
"autoprefixer": "^6.4.0",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^2.0.0-beta.3",
"node-sass": "^3.8.0",
"postcss-loader": "^0.9.1",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"webpack": "^2.1.0-beta.20"
}
If I use a version of extract-text-webpack-plugin which is <2.x, then I get other errors, it's not compatible with webpack 2.
So, baby steps in the code above... Simply tried to at least obtain my bootstrap.scss and style.scss transformed into 2 separate css files: bootstrap.custom.min.css and style.min.css (don't know what to do about sourcemaps yet).
This is all I could come up with after searching google and trying to follow some examples. No solid tutorial out there that could make me understand how to use webpack for what I need to accomplish. I'm only guessing here, blind-folded.
But when I type webpack in the console and hit Enter, I don't get any css file, instead I get the following 3 files:
bootstrap.css - with the exact same content as the source
bootstrap.scss, like it just copies the file content over, instead of compiling scss to css;
bootstrap.custom.min.js which has a bunch of javascript code in
it;
style.min.js - which also has a bunch of javascript code in it.
I've been stuck here for days, didn't even get to all the rest I need (sourcemaps and a destination folder of my choosing for the css files and css.map files).
I want to get a basic pre-processing workflow in place. I've set up a directory structure like this:
- website-root
- - index.html
- - css
- - pre-processing
- - - Gruntfile.js
- - - package.json
- - - sass
- - - - test.scss
I'm using Grunt, as I'd like some advanced build actions in future. I'm also using Compass as I'd like to use its mixins etc.
What I want to do for now is simply set up a watch task to compile 'test.scss' into a 'test.css' file inside the css folder in the website root. However, no matter what I try, when I type 'compass watch' into the console and then change the contents of the 'test.scss' file, the result is that the 'test.css' file is always compiled into a new folder called 'stylesheets' in the 'pre-processing' folder.
The Gruntfile.js contents are:
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dev: {
options: {
sassDir: 'scss/',
cssDir: '/css/',
relativeAssets: true
}
}
},
watch: {
sass: {
files: ['scss/{,*/}*.{scss,sass}'],
tasks: ['compass:dev']
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['compass:dev']);
}
The package.json file contains this:
{
"name": "Test",
"version": "0.0.1",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-compass": "^1.0.1"
}
}
So the cssDir option in Gruntfile.js seems to have no impact.
Can anyone suggest why this is happening? I'm a total pre-processing newby so could be missing something obvious!
Thanks.
When you type 'compass watch', you're running compass directly. You're trying to get this working using grunt. You need to type 'grunt watch'.