I want to configure prettier in my nativescript vue project. I use tslint + prettier + tslint-config-prettier plugin, created some basic configuration, setup file watchers etc. The problem is, that prettier modifies the cases of my CSS selectors in *.vue files e.g Label => label, which destroys styling of the whole app.
How can I prevent it? Css is a part of *.vue file, therefore I can't simply ignore *.scss files.
Related
I have a style.sass file that #uses several _*.sass partials. That was all working fine. Now I added a _*.scss file (it just contains a map, so I wanted it to be multiline), but editing that file does not trigger a rebuild of the style.sass file. I tried adding a SCSS file watcher too, since I'm not sure how IntelliJ decides what to watch, but that didn't help.
It works fine using Dart-SASS's --watch argument. How do I make IntelliJ do the same?
(Although it's a Play project, I'm using IntelliJ's file watchers because I wanted to be able to use #use, so I needed Dart SASS.)
The watcher can only listen to changes in files of same type (either SASS or SCSS), depending on the watcher settings, so you can't make the watcher work for both .scss and .sass files at the same time unless you use a custom scope with both .sass and .scss files included and set File Type: to Any:
Is there a config option in Vue to make a separate CSS file?
I tried using the webpack plugin to extract CSS. However, Vue still loads the same styles inline.
Is there something I’m missing about Vue? Or is this purely my misunderstanding of webpack?
webpack.config.js
My question is related to webpack. Let's say I'm using webpack and vue.js project. How does webpack build the project when I run the npm run build. I know that there's a build folder where config files have to be added and there'll be output folder dist which will save my final project.
Question 1) WHat does webpack do? Does it search entry point in config file so that it knows where to start building process from? for vue.js it's src/main.js. AM I right?
QUestion 2) when it finds main.js, what does it do? does it go from main.js to top so that to find all the dependencies ?
QUestion 3) Let's say IT found a .vue file. what does it do? does it seperate js code - put it into some other js file, then seperate css and put it into some other css file? or just take the whole .vue code and puts it into js file(with all its html and so on)?
QUestion 4) Just need that line of code what it looks to show me QUestion 3) answer.
Yes, webpack has an entry point (entry section from config). It's not src/main.js exactly, it's configurable.
It builds a dependency tree starting from an entry point.
It will be handled with loaders in the sequence you provided. Usually, it's vue-loader which transforms vue files to js, next it goes to babel-loader which transpiles your js dialect (Flow/ES6/ES2017/TS) to ES5, next ot js-loader which can finally split all the code to dependencies and continue loading.
CSS separation can be done with webpack plugins like ExtractTextWebpackPlugin and then your css dialect (LESS/SASS/PostCSS, etc) will be transformed with loaders, i.e. sass-loader, css-loader, style-loader.
When styles extraction plugin is not present, it will distribute css along with js and put it to the head styles.
I need to develop a plugin for Moodle, and i need to have some js and css files in plugin. But i have the next problem - how to work with them from installed plugin? Of course, i can hardcode their path via to moodle structure, but it's a very dirty and bad way. Also, i know that i can place all js and css code inline, but i think that it's a bad decision too. Is there a built-in way to serve assets from plugin? I tried to find it in documentations, but found nothing.
Thanks
I assume you want to know how to include CSS and JS files into your plugin.
You can include a JS file via the command:
$PAGE->requires->js( /relative/path/your_script.js');
You can then call a JS function once the page has been downloaded with the command:
$PAGE->requires->js_init_call ( your_JS_function_name, array_of_parameters_here, bool: on DOM ready);
For example:
$PAGE->requires->js_init_call('init', array($USER->lang), true);
Be sure to make the $PAGE available with global $PAGE;, first.
Your CSS file can be named styles.css and put into the root folder of your plugin. The file will be automatically read by the system and included. It will take precedence over (will overwrite the settings of) the system CSS files. After that you will have to reload the theme caches.
I'm trying to create a dojo build file. What do I need to add in the profile.js file to include all the .css files inside the dojo build.js file. I'm getting dijit.js and other .js files, but the dependent .css files are not getting built into the build.js file
I'm using dojo 1.8
It doesn't really make sense to ask to combine JS and CSS into a single file. JavaScript is JavaScript; CSS is CSS.
That said, you should be able to get down to as little as one CSS request by specifying cssOptimize: 'comments' in your build profile, which will strip comments from CSS files within packages the build processes, and flatten imports. As a result, each Dijit theme's main CSS file (e.g. themes/claro/claro.css) will then require only one request, rather than requests for each component.