I already found this question: lessc returns empty CSS file but it did not help.
I am using Mac OS X Yosemite.
I have those packages installed:
$ npm list -g --depth=0
/usr/local/lib
├── bower#1.3.12
├── grunt-cli#0.1.13
├── gulp#3.8.10
├── learnyounode#2.3.3
├── less#2.4.0
├── n#1.2.13
└── npm#1.2.15
But when I try
$ lessc style.less > style.css
it only creates an empty css file. I downloaded SimpleLESS now and there the same .less-file gets compiled properly.
What am I doing wrong?
I tried the example from lesscss.org for the file style.less:
#base: #f938ab;
.box-shadow(#style, #c) when (iscolor(#c)) {
-webkit-box-shadow: #style #c;
box-shadow: #style #c;
}
.box-shadow(#style, #alpha: 50%) when (isnumber(#alpha)) {
.box-shadow(#style, rgba(0, 0, 0, #alpha));
}
.box {
color: saturate(#base, 5%);
border-color: lighten(#base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
I use lessc 2.4.0:
$ lessc --version
lessc 2.4.0 (Less Compiler) [JavaScript]
Related
In my index.html file I have some styles like this
.some-thing {
background-image: url('/logo.svg');
}
the logo.svg is in folder /static and vite.config.js hase
publicDir: 'static',
It works fine on yarn dev' but on yarn build` the above code is converted to
.some-thing {
background-image: url('__VITE_PUBLIC_ASSET__cc0131c0__');
}
and in console I see error VITE_PUBLIC_ASSET__cc0131c0 could not be loaded 404.
Is there a way to stop getting error from ESLint for single word view name in Vue3?
Every time I run ESLint, I get following message:
1:1 error Component name "About" should always be multi-word vue/multi-word-component-names
I currently have this setup:
file structure:
├── index.html
├── node_modules
├── npm
├── package.json
├── package-lock.json
├── public
│ └── favicon.ico
├── README.md
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.svg
│ ├── components
│ │ └── Menu.vue
│ ├── env.d.ts
│ ├── main.ts
│ ├── router
│ │ └── index.ts
│ └── views
│ ├── About.vue
│ └── Home.vue
├── tsconfig.json
└── vite.config.ts
.eslintrc:
{
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"#vue/typescript/recommended"
],
"parserOptions": {
"ecmaVersion": 2021
},
"rules": {}
}
package.json
{
...
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview",
"lint": "eslint --ext .ts,vue --ignore-path .gitignore ."
},
...
}
Option 1: Disable globally
To disable the rule in all files (even those in src/components):
// <projectRoot>/.eslintrc.js
module.exports = {
⋮
rules: {
'vue/multi-word-component-names': 0,
},
}
Option 2: overrides in ESLint config for src/views/
To disable the rule only for src/views/**/*.vue, specify an overrides config:
// <projectRoot>/.eslintrc.js
module.exports = {
⋮
overrides: [
{
files: ['src/views/**/*.vue'],
rules: {
'vue/multi-word-component-names': 0,
},
},
],
}
Note: If using VS Code with the ESLint Extension, restarting the ESLint Server (through Command Palette's >ESLint: Restart ESLint Server command) or restarting the IDE might be needed to reload the configuration.
Option 3: Directory-level config for src/views/
It's also possible to disable the rule for src/views/**/*.vue with an .eslintrc.js file in that directory:
// <projectRoot>/src/views/.eslintrc.js
module.exports = {
rules: {
'vue/multi-word-component-names': 0,
},
}
For those still having this issue, add the following under rules in the .eslintrc.js file
rules: {
...
'vue/multi-word-component-names': 0,
}
There's a simple solution. You need define your component name with more than one word as it states. Should be PascalCase as below;
eg: AboutPage.vue
Find a vue.config.js file in the project root directory, create one in the root directory if you don’t have one, write the code marked below, save it, and recompile it. The project will run normally
Change your component name from About to AboutView
This prevents conflicts with existing and future HTML elements, since all HTML elements are a single word.
Bad
<!-- in pre-compiled templates -->
<Item />
<!-- in in-DOM templates -->
<item></item>
Good
<!-- in pre-compiled templates -->
<TodoItem />
<!-- in in-DOM templates -->
<todo-item></todo-item>
I'm rewriting an existing project using the latest vue enterprise boilerplate. I haven't been able to find any examples of the use of vue enterprise boilerplate so I'm doing trial and error. When using some of the existing code with large <style> blocks I'm running into compile problems importing from .scss files which are all in the directory src/design/. This code
<style lang="scss" module>
#import '#design';
.container {
#extend %relative-block;
...
throws this error
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: The target selector was not found.
Use "#extend %relative-block !optional" to avoid this error.
╷
86 │ #extend %relative-block;
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
/home/dean/src/vue/examples/rewrite.0/src/components/nav-bar.vue 86:3 root stylesheet
The relative-block exists in the design/_positioning.scss file and Intellij is able to find it
%relative-block {
position: relative;
display: block;
}
I also get errors when using sass #mixins:
#include lq-size(100%, 100%);
gives
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
╷
50 │ #include lq-size(100%, 100%);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
/home/dean/src/vue/examples/rewrite.0/src/app.vue 50:3 root stylesheet
The #mixin lq-size exists and Intellij finds it in design/_mixins.css:
#mixin lq-size($width, $height) {
width: $width;
height: $height;
}
These errors occur for code in new .scss files that I've added to the src/design/ directory, and for new code in existing .scss files.
I'm new to sass and scss. When I update a .scss file of add a new .scss file into the src/design/ folder do I have to tell the sass-loader to look for updated .scss files?
I'm new to gulp, susy, sass, and have been looking for a solution to my following problem but haven't been successful in finding one.
#import 'susy';
#import 'breakpoint-sass';
does not work, but
#import "../node_modules/modularscale-sass/stylesheets/_modular-scale.scss";
#import "../node_modules/breakpoint-sass/stylesheets/_breakpoint.scss";
works. But it's not the right way isn't it?
I've also tried, sudo npm install breakpoint-sass --save-dev but still didn't work.
My project looks like
.
├── assets
│ ├── atoms
│ │ └── _test.scss
│ └── style.scss
├── dist
│ └── style.css
├── gulpfile.js
└── package.json
and this is my gulp file:
const gulp = require('gulp'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
autoprefixer = require('autoprefixer'),
sass = require('gulp-sass')
imagemin = require('gulp-imagemin'),
uglify = require('gulp-uglify'),
plumber = require('gulp-plumber');
gulp.task('sass', function() {
return gulp.src('./assets/*.scss')
.pipe(sass({
outputStyle: 'compressed',
includePaths: ['node_modules/susy/sass']
}).on('error', sass.logError))
.pipe(gulp.dest('./dist'));
});
and this is my package.json:
{
"private": true,
"engines": {
"node": ">=4"
},
"devDependencies": {
"autoprefixer": "^6.3.6",
"breakpoint-sass": "^2.7.0",
"browser-sync": "^2.2.1",
"gulp": "^3.9.1",
"gulp-imagemin": "^3.0.1",
"gulp-plumber": "^1.0.1",
"gulp-sass": "^2.1.1",
"gulp-uglify": "^1.1.0",
"modularscale-sass": "^2.1.1",
"susy": "^2.2.12"
}
}
I hope you could help me out.
Thanks for your time
You just need to add the paths to the includePaths parameter in your sass task.
gulp.task('sass', function() {
return gulp.src('./assets/*.scss')
.pipe(sass({
outputStyle: 'compressed',
includePaths: [
'node_modules/susy/sass',
'node_modules/breakpoint-sass/stylesheets'
]
}).on('error', sass.logError))
.pipe(gulp.dest('./dist'));
});
In fact you had that already for susy just not breakpoint-sass. You can't import breakpoint-sass either, it has to be just breakpoint:
#import 'susy';
#import 'breakpoint';
That's because you want to import the file called node_modules/breakpoint-sass/stylesheets/_breakpoint.scss. Your import would try and find node_modules/breakpoint-sass/stylesheets/_breakpoint-sass.scss which doesn't exist.
For reference, the steps for installing and using a SASS library are:
Install the library with npm.
Find the library in node_modules/. Expand it, and find the file you want to #import. In this case it's _breakpoint.scss.
Add the path to the directory the file from step 3 lives in to includePaths.
Add the import to your own SASS source.
Or you can just keep the full #import in your code if you want. Or just include node_modules and then import e.g. susy/sass/susy and breakpoint-sass/stylesheets/breakpoint. It's up to you really.
Having a very weird breakpoint problem.
Screen.scss contains the most basic breakpoint example:
#import "breakpoint";
$high-tide: 500px;
.johnny-utah {
color: blue;
#include breakpoint($high-tide) {
content: 'Whoa.';
}
}
This gets compiled to:
.johnny-utah {
color: blue;
}
Seems like breakpoint is not returning anything. It used to work before.
Compass 1.0.1, Breakpoint 2.5.0 and SASS 3.4.3 running on OS X.10.
My config.rb is nothing special:
# Require any additional compass plugins here.
require 'breakpoint'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
fonts_dir = "fonts"
output_style = :nested
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
color_output = true
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
preferred_syntax = :scss
Never mind, this was my most stupid error ever!
This was an old project and I thought I was using Breakpoint back then, but no ... I used my own mixin called _breakpoint.scss which looked like this:
#mixin breakpoint($breakpoint) {
#if $breakpoint == tablet {
#media only screen and (min-width: 768px) { #content; }
}
#if $breakpoint == desktop {
#media only screen and (min-width: 1024px) { #content; }
}
#else if $breakpoint == big_desktop {
#media only screen and (min-width: 1280px) { #content; }
}
}
That's why nothing was outputted ..