I'm developing with vue.js and vue cli 3. Currently I handle my CSS styles with SASS and compile them with Koala-app. At the moment I am still using it because it is very easy to configure the main.scss and their respective files, and then compile it with autoprefix, in compressed format and with source map to another folder with the name styles.css, I keep the following structure:
I need to replace koala with NPM SASS Loader, how do I replicate this same configuration with VUE CLI 3? The information for the webpack should be added in vue.config.js? Or where? and what would be the parameters to achieve the same effect?
Related
I want to remove node-sass from my current react project. I want to get off sass and move to simple css format. How do I do it using npm? How to remove sass-dependency from the webpack config file which create-react-app uses internally? Overall, how to just remove everything related to sass from the project?
the following steps worked for me
1.goto node modules in your project files.
2.look for node-sass folder
3.delete the node-sass folder
Is it possible to use webpack to compile a directory of scss files to a directory of css files?
I don't want to use the sass command line tool because it's part of an angular project and with the help of custom builders I can run the webpack script with only ng build
e.g.
- src
- themes
- theme-dark.scss
- theme-light.scss
to
- dist
- themes
- theme-light.css
- theme-dark.css
Hower I think this is currently not possible because webpack seems to need the scss imported in javascript and not in single files and writes the generated files to js and not css.
Is that what I want even possible with webpack or do I need another tool?
You can use Sass compiler to compile scss to css with a single command. Exactly the use-case you are looking for.
sass --watch src/themes:dist/themes
watch will compile on a file change (optional)
I have a problem, I'm trying to build a component library and at the same time I would like to have a dev server in the same project for fast debugging and developing of this component library.
Currently my configuration is next, for library building I use typescript to transpile to es5 and I have all styles as scss and compile them into css with node-sass. For this config to work I import styles as css(not sass) since otherwise scss files won't be found in lib directory.
Here are my source files:
And this is lib folder after being compiled:
And this is my configuration for building lib folder
Now I'm trying to configure dev server with webpack and I decided to import components directly from src (not lib) to fast forward development. And it doesn't work with my current styles imports (as css) because webpack compiles my scss styles as a big bundle and merges it into js bundle but those statements where I import css are still there which case errors.
Module not found: Error: Can't resolve './Title.css'
I believe there is a solution to this problem but which way to take I'm not sure, please suggest!
My preference is to keep library building without webpack and use webpack for dev server
I want to customize Bootstrap 4 theme such as colors, fonts, etc..
I read the instructions from Bootstrap website saying that I need to create custom.scss file and import Bootstrap’s source Sass files like this
// Custom.scss
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
I'm new to both Sass and NodeJS and I do not know how to get started with a NodeJS and Sass project.
I went as far as installing NodeJS and Sass on my Mac using brew. I also installed Bootstrap by typing:
npm install bootstrap
This is the most progress I have made. I do not know in which path the bootstrap files are installed when I did the command npm install bootstrap and also I do not know how to bring that Bootstrap installation into my project folder.
Could anyone please provide some information or point me to a resource on how to get started with a NodeJS and Sass project so I can customize Bootstrap 4 theme using Sass.
You have to run the npm install bootstrap command inside your project directory. Bootstrap and its files will then be installed into the directory node_modules/bootstrap inside your project directory.
Now, when placing your custom scss files into this folder, they will be able to access the node_modules directory, in which bootstrap is.
You can then create a custom building pipeline using npm tools for compiling scss files to css. This requires more in-depth knowledge on node.js and NPM, but that is the usual and recommended way of doing it.
If you just want to compile the scss once and work with the css from there without having to use node.js more in depth, you can use packages like scss-compile and then use console commands like node-sass -rw scssFiles -o cssOutputFiles to compile your custom theme once.
I am using Angular CLI for Angular2 project. And I am using less for my styling.
To compile less file with Angular CLI, I have to import less file with its absolute path. Which breaks editor's intellisense. So instead of using LESSPlugin comes with AngularCLI, I want to use IDE's less watcher and compiler (available in vs code as well as webstorme) to compile less to css.
But there are less files still exists in source, 'ng serve' try to compile less and that breaks the build.
Is there any way to configure angular cli to ignore less file and use available css in source folder?
I manage to do that by uninstalling less module from project using 'npm uninstall less --save-dev'
Now I can use relative path for less import and also intellisense is working now.
When you generate a new project using angular cli, type a command like below:
ng new new-project --style less
It will setup your project using less. When you serve(run) the project each time, angular cli will automatically compile your less files.
According to ng command manual
ng new <options...>
--style (String) (Default: css)