I'm new to SCSS and I'm using VS Code's extension to watch my SCSS, I've set-up my settings.json file and everything works - however - when I watch my SCSS files and save, it creates two .css files.
index.css
main.css
Index.css is an empty .css file
Main.css is a .css file with all of my styling in it.
Why does it keep on generating the empty index.css file ?
Here is my settings.json file's content to help out a little.
{
"editor.accessibilitySupport": "off",
"window.zoomLevel": 0,
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.donotVerifyTags": true,
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"workbench.iconTheme": "material-icon-theme",
"editor.minimap.enabled": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"workbench.colorTheme": "Night Owl",
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
// "python.jediEnabled": false,
"[python]": {
},
"editor.fontFamily": "Input",
"editor.fontSize": 16,
"[php]": {
"editor.defaultFormatter": "kokororin.vscode-phpfmt"
},
"liveSassCompile.settings.autoprefix": [],
"liveSassCompile.settings.formats": [
{
"format": "compact",
"extensionName": ".css",
"savePath": "/dist/assets/css"
}
],
"liveSassCompile.settings.generateMap": false
}
I figured out why it happened, so I'll post an explanation to help whoever came across a similar issue.
I created a partial without adding the _ in front of it.
Here is my folder structure with my file named wrong:
- scss
- pages
- pages.scss
Here is my folder structure with my file named correctly:
- scss
- pages
- _pages.scss
Hope it helps.
Related
I have been experiencing a recent issue with formatting in .scss, .css and .html files in Visual Studio Code and I can't seem to figure out how to return it to my preferred setting.
Before, I could type a class name, open the bracket and click enter and it would be formatted nicely as shown below. Now when clicking enter, it just drops to a new line and I have to manually create more space and indenting.
Before
.test {
|
}
After
.test {
|}
settings.json configuration
{
"editor.bracketPairColorization.enabled": true,
"workbench.editor.highlightModifiedTabs": true,
"workbench.colorTheme": "Moonlight II Italic",
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"editor.tabSize": 2,
"svelte.language-server.runtime": "/usr/local/bin/node",
"npm.keybindingsChangedWarningShown": true,
"window.zoomLevel": 1,
"files.trimFinalNewlines": true,
"editor.language.brackets": [],
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.associations": {
"*.html": "twig"
},
"emmet.includeLanguages": {
"twig": "html"
},
"editor.formatOnType": true
}
Any help to fix these formatting issues would be greatly appreciated!
you can try to create snippets of your own ,
and for that you can check this https://youtu.be/wxckctXHSC0
or
you can try resetting your preferences
Sorry about the vague title here, it's one of those problems where I don't know what I don't know. Let me describe my directory structure:
root
src
tsconfig.json
test
tsconfig.json
tsconfig.json
This is some legacy code. Normally I like to set up my project so that test files and source files are in the same directories, but that would be a massive change, so I'm trying to figure out how to get it to work the way it's already structured.
Basically, I want to be able to do this in a test file:
// current file: test/downloader_test.ts
// downloader file: src/downloader.ts
import { Downloader } from "./downloader";
...
I can do this when source and test files are in the same directory, but in this case, they are in separate directories so I get an error on the import line about how "./downloader" doesn't exist.
There is a workaround that's already being used: instead, I could import from ../lib/downloader, and it works, but I'd like to be able to refer to the typescript files. Is there any way for test files to import typescript source files when they are under separate tsconfig.json files?
I figure if a solution exists it's probably a tsconfig setting. These are what mine currently look like:
root/tsconfig.json:
{
"compilerOptions": {
"rootDir": ".",
},
"files": [],
"references": [
{
"path": "./src"
},
{
"path": "./test"
},
]
}
root/src/tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"outDir": "../lib",
"noImplicitReturns": true,
"noUnusedLocals": true,
"sourceMap": true,
"strict": true,
"lib": ["es2020", "dom"],
"target": "es2019",
"composite": true,
"allowSyntheticDefaultImports": true
},
"compileOnSave": true,
"types": ["node"],
"include": ["**/*.ts"]
}
root/test/tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"outDir": "../libtest",
"strict": false,
"composite": true,
"sourceMap": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
},
"include": [
"**/*.ts"
]
}
I've also tried modifying that last file to add a
"references": [
{
"path": "../src"
}
]
but that didn't change anything for me.
You can use one config file in root folder only, and in include, you can add
"include": [
"src/**/*" // According to your structure
]
other things in config file set according to your requirement and change the path.
import { Downloader } from "../src/downloader”;
after adding "resolveJsonModule": true to my project .tsconfig, I am able to directly import data from .json files. Project runs okay, even with nodemon.
But when then project is built, and all the files are compiled to a dist folder, running node dist/index.js now fails when it encounters the json import. The actual build command appears to be:
babel src --out-dir dist --extensions .js,.ts --source-maps
This is a server-side, non-webpack project.
tsconfig as requested:
{
"compilerOptions": {
"baseUrl": ".",
"typeRoots": ["./types"],
"target": "es6",
"module": "es6",
"declaration": true,
"outDir": "dist",
"strict": true ,
"noImplicitAny": true,
"strictNullChecks": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"resolveJsonModule": true
}
}
It seems json files are being compiled too.Try excluding them
{
"compilerOptions": {...},
"exclude": [
"foldercontainingjsonfiles/*.json"
]
}
Check that dist folder structure doesn't change after .json import. I had a similar problem when I imported a config.json which was outside src folder with *.ts files. Moving .json files inside src folder fixed the issue.
I want to use tab indention instead of spaces while using Airbnb settings in eslint. I have created the .eslintrc.json file using eslint --init in the root of my project
Problem is eslint won't respect the custom settings of this file.
I still get error:
[eslint] Unexpected tab character. (no-tabs)
The error is the same in VS Code, Vim, Sublime.
What am I missing here? According to what I read, this new .eslintrc.json file should work with my custom settings.
.eslintrc.json file:
{
"extends": "airbnb-base",
"env": {
"browser": true,
"node": true
},
"rules": {
"comma-dangle": "off",
"indent": ["error", "tab"],
"no-console": "off"
}
}
I first installed eslint globally and locally
{
"extends": "airbnb",
"env": {
"browser": true,
"node": true
},
"rules": {
"comma-dangle": "off",
"indent": ["error", "tab"],
"no-tabs": 0,
"no-console": "off"
}
}
Needed no-tabs: 0
I changed the output paths in my semantic.json which is working fine. However I would like the following files to be built in ../../static/css (../../static/js):
semantic.css
semantic.js
semantic.min.css
semantic.min.js
What do I have to change in order to achieve this?
File content:
{
"base": "semantic/",
"paths": {
"source": {
"config": "src/theme.config",
"definitions": "src/definitions/",
"site": "src/site/",
"themes": "src/themes/"
},
"output": {
"packaged": "../static/",
"uncompressed": "../static/components/",
"compressed": "../static/components/",
"themes": "../static/themes/"
},
"clean": "../static/"
},
"permission": false,
"autoInstall": false,
"rtl": false,
"components": [
/* Components come here... */
],
"version": "2.2.13"
}
Changing the output directories in the Semantic.json didn't work for me, but changing it in semantic/tasks/config/defaults.js worked. I don't know why or if that's good, but the files have been created correctly now.
As to your problem with separating CSS and JS:
Here (https://github.com/Semantic-Org/Semantic-UI/issues/2221) it says:
JS and CSS files are not set up to have separate output directories in
the current build system.
As of July 2016 there was no solution yet.