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?
Related
I want to create a npm module for other projects shared at our repository. My "library" contains some vue.js basic components and some SCSS. I want to reuse this basic scss and the components.
I do use the same SCSS in my components too. Following an example excerpt from a library component:
<style scoped lang="scss">
#import "./src/assets/css/variables.scss";
....
</style>
Now I want to reuse this component inside my main project but the sass loader fails by referencing this variables.scss (inside my library module). Well this path obviously can't work. I should do something like "../assets/css/variables.scss" to work both in library build as in project build... what has some caveats too when I use nested folders.
I'm wondering to find so little information about it in the internet. Could some one give me an advice of "how to do it right"?
Thanks in advance!
If I understand you correctly, you want to import your variables sass file to your "sub project".
In that case, when you have built your npm "library" package, you can reference it by package name in the sub project you install it to:
<style scoped lang="scss">
#import "library-name/assets/css/variables.scss";
....
</style>
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 have used vue cli to create a custom vue project. I included router and vuex. I have bootstrap.min.css and styles.css in src/assets/css/
in my App.vue styles tag I use the following:
#import './src/assets/css/bootstrap.min.css';
#import './src/assets/css/styles.css';
when I do npm run serve, these files are served as html. It feels like I have tried a million variations of this import path but nothing works. I have wrapped it in a URL, I have 'required' it in main.js. Nothing works.
This should work if you are pulling it from node_modules:
#import "~bootstrap/scss/bootstrap";
check how I did it here.
I tried importing the files in my main.js file instead of the app.vue tags and noticed errors along the lines of 'couldn't find modules … /assets/img/bg1.jpg' etc etc. Turns out that all the asset path within my styles.css files needed correcting before it would work.
Thanks to everyone who assisted!
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.
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