The documentation for Bootstrap's node package says to simply add #import "bootstrap"; to my scss file to include Bootstrap's scss.
When writing my own node package, how do I get this functionality?
For instance, I have a package called foobar. How can I set it up so that it will know where to grab my package's scss simply by putting #import "foo"; in my main scss file?
If the name of your main SCSS file is foo.scss, it works. Check here for more information: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import
Related
In my vue file after script tag I'm importing styles like this:
<style scoped lang="scss" src="../../styles/scss/components/_navbar.scss"></style>
this combined with webpack and babel works fine but I also want to have "global" variables in scss so I have main.scss file in which I'm importing other files:
#import 'abstracts/mixins';
#import 'abstracts/variables';
#import 'base/base';
#import 'base/typography';
So actually this file I'm just importing in App.vue (root of Vue SFC) but without scoped directive obviously:
and in _navbar.scss I expect to have access to variables from main.scss -> #import 'abstracts/variables';
but apparently I have not because it print error that variable is undefined
Undefined variable: "$color-grey-light".
therefore currently I just import variables once again in _navbar.scss. How to avoid that but keep this nice (at least to me) structure with importing independent .scss files?
Just added the package normalize-scss to my new Vue project, but none of the styles are being applied... I've tried both:
#import 'normalize-scss' in my styles.scss
import 'normalize-scss' in my main.js page
Am I doing something wrong? The package is clearly there because the app runs, but it doesn't actually apply any css rules.
I figured it out. You need to put the normalize() after you import it, in your main.scss file. So:
#import 'normalize-scss';
#include normalize();
after installing it with npm import it at the top of main.js file:
import "normalize.css"
If you have a main/global scss file you already use:
Add normalize.css (any of these) to your project: yarn add normalize.css (or npm)
in your main.scss for example: #import '~normalize.css';
Note the ~ for ambiguity as cli docs say: https://cli.vuejs.org/guide/css.html#referencing-assets
Not sure if this is the correct way to do this but, if you are using vue-templates maybe you can try to import the style doing this:
<style lang="scss">
#import 'src/assets/css/mycss_lib.css';
</style>
Also remember, do not use scoped in the style-tags. You also need, scss loader and node-sass to make this work.
npm install --save normalize-scss
In main scss file #import "normalize-scss/sass/normalize/import-now";
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.
I have a set of scss file that I package as a library for reuse in several other web applications. I am aware that in my package.son for js files, I can specify the entry point in main property. Not sure how to specify this for scss file libraries. I have a main.scss that includes all the scss files that I developed and that imports the thirdparty sass files that need. I looked up how bootstrap the scss files and found that they don't really mention the main stylesheet in the package.json.
Do I need to define the main property in the package.json or leave it documented on how the scss files need to be resolved from node_modules?
If you're using node-sass (or something that depends on node-sass) to compile your sass then you can use sass-module-importer to import your own main.scss.
In your repository with your main.scss file you just need to set the "style" or "main" property in your package.json to point to your main.scss file (example here: https://github.com/bameyrick/sass-helpers/blob/master/package.json).
If the third party scripts you import into your main.scss file do not have a style or main property in their package.json, then the imports in your main.scss file will need to point to that file from the node_modules folder (e.g. #import './node_modules/third-party-lib/src/index.scss') because sass-module-importer will not be able to resolve that dependency for you.
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