I like the autocompletion feature of Webstorm, Phpstorm and Intellij and the other jetbrain-products. It doesn't work however if I have a structure like this:
img/my-img.jpg
sass/main.scss
sass/component/_component.scss
// sass/main.scss:
#import "/component/component"
// _component.scss:
.class{
// => autocomplete doesn't work here as desired <=
// how intellij completes it
background: url(../../img/my-img.jpg)
// what i would like to have instead
background: url(../img/my-img.jpg)
}
Is there some way of telling IntellJ how to use the sass folder as base for the autocompletion of images and to get rid of the annoying error notice?
You can mark img folder as resourse root.
From jetbrains documentation:
Files under a folder marked as Resource Root can be referenced relative to this folder.
Related
I created a new Kotlin/JS Gradle project using the wizard in IntelliJ.
I'm unclear how I'm supposed to add css to the project. The documentation explains how to enable css webpack support, but it doesn't actually say how to add the css file into your project (i.e., how to use the file).
For example, in a normal project, you would just import it in a javascript file. Since I am writing in Kotlin, how do I do it now?
The current documentation is not very precise about this. There are actually two cases:
Importing CSS from existing packages
You can pretty easily import CSS files from other Node-modules using the require() function:
import kotlinext.js.require
import kotlinx.browser.document
import react.dom.h1
import react.dom.render
fun main() {
require("bootstrap/dist/css/bootstrap.css")
render(document.getElementById("root")) {
h1 { +"Hello"}
}
}
For this to work, you need to specify cssSupport.enabled = true in your Gradle build, just like described in the documentation. CSS imported this way will be processed by Webpack.
Incorporating your own CSS into the Webpack build
This seems to be a bit tricky right now. The KotlinJS plugin doesn't copy any resources to the Webpack's build directory (build/js/packages/<project_name>) by default and I didn't find any obvious configuration option for this. To solve it, you have to tell Webpack where it can find your styles:
Create webpack.conf.d directory in project's root and put inside some JS file containing:
config.resolve.modules.push("<your_stylesheet_dir>");
This config will be picked up by the KotlinJS plugin and merged into the generated build/js/packages/<project_name>/webpack.config.js. With this configuration you can just require() project's styles like in the example above. It is kind of mentioned in the documentation.
Alternatively you can tweak the Gradle build, so it copies the stylesheets into the Webpack's build dir:
task("copyStylesheets", Copy::class) {
from(kotlin.sourceSets["main"].resources) {
include("styles/**")
}
into("${rootProject.buildDir}/js/packages/${kotlin.js().moduleName}")
// kotlin { js { moduleName = "xyz" }} has to be set for this to work
}
tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinJsDce::class) {
dependsOn("copyStylesheets")
}
Simply sticking a CSS file into main/resources and referencing it in index.html worked for both browserDevelopmentRun and serving the production build, statically. The CSS file appears in build/distributions.
My build:
kotlin("js") version "1.7.20"
index.html
<link rel="stylesheet" href="index.css">
index.css is in the same resource folder as index.html.
This also works for images anything else, apparently.
I'm trying to setup a file watcher in PyCharm for my SASS files. I've followed the official guide and it worked jsut fine (https://www.jetbrains.com/help/pycharm/transpiling-sass-less-and-scss-to-css.html#)
Now I'd like to change the destination of the compiled CSS files to a specific folder, relative to the SASS file. Basically, the output directory should be ../css/ when starting from the SASS file, because my structure looks like this:
app1/
static/
css/
myfile.css
sass/
myfile.sass
app2/
static/
css/
myfile2.css
sass/
myfile2.sass
I'm not sure I understand what values I should put in arguments and output paths to refresh. I'm currently using the default settings (https://imgur.com/a/rrIJHeR)
I solved it. For anyone struggling with the same issue, here's how I fixed it:
Arguments = sass\$FileName$:css\$FileNameWithoutExtension$.css
Output = css\$FileNameWithoutExtension$.css
Working Directory = $FileParentDir$
Here's an image of the setup :
I am using laravel5.4 with vuejs2 to build a small project. I have just started learning vuejs2 with laravel. Using laravel-mix to compile my assets. In laravel-mix documentation i can't seem to find a way to add my own plain css file to be merged and watched.
I have my own css rules in public/css/custome.css file. what should i write in the webpack.mix.js file so that my this file is included and watched by laravel mix? Currently i have below lines in the file:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Move your custom CSS file into resources/css folder and write the configuration below in webpack.mix.js
Note: You probably won't have a css folder in resources, so just create one.
mix.styles([
'resources/css/custom.css'
], 'public/css')
I found a solution on Laracast and it worked for me.
Here are the steps :
Save the content of public/css/custome.css in resources/assets/sass/_custome.scss
You have to change the file extension to .scss and add an underscore at the beginning.
The underscore will be useful when importing in your main app.scss file.
Import your resources/assets/sass/_custome.scss file into your resources/assets/sass/app.scss this way :
/* importing _custome.scss from the same directory containing the following files
resources/assets/sass/{app.scss, _custome.scss, _variables.scss} */
// import _custome.scss
#import "custome";
// import _variables.scss (custom variables for bootstrap-sass)
#import "variables";
// importing bootstrap-sass from node modules (if you are using bootstrap)
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
Include this in your webpack.mix.js file
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Compile with
npm run dev
That's all.
Intellij always index every file in my project to give me the best autocompletion-suggestions. But there is one probelm it only indexs the files from src - directory for autocompletion.
now i got some css styles from a node-module which i also want to get autocompletion-suggestions.
i could fix this with 2 bad solutions:
by copying those css files directly inside the src
dir. The problem is now that when the styles inside node modules gets
updated the copyied files, didn't got there update.
by marking the complete node_modules dir as src folder,
but then i get autocompletion and Ctrl+Shift+N - suggestion also from
this dir that should happen only for one specific node-module.
Can i tell intellij that it should also use those specifics files for autocompletion? And not only those from the src-folder?
I'm using Intellij IDEA 2016.1.3
I've setup a compass file watcher as listed here.
http://blog.founddrama.net/2013/04/watching-compass-files-in-webstorm/
The file watcher works flawlessly, same as the command line compass process.
I'm curious if there's a way to configure WebStorm to point to references in the .scss file instead of the compiled app.css file.
Example
Inside index.html i have
<a href='#' class='pandaStyle'>
When i click on pandaStyle, it takes me to the line inside the compiled app.css
I'd like it to take me to the partial of _animalStyle.scss
As #Iena said, it's not possible. Try voting for the issue (http://youtrack.jetbrains.com/issue/WEB-6737) and JetBrains may add the feature.
I solved the problem like this:
Adding
#import "myFolder/myCssStylesheet";
to the .scss file and get all css classes and Id's from that stylesheet.
For example:
#import "Styles/bootstrap.css";
gives me all bootstrap classes autocomplite in my .scss files