I am using storybook with Vue. I have some common SCSS I want to use.
I am using the addon in **main.js**
addons: [
'#storybook/preset-scss'
],
This seems to automatically pick up ./src/scss/variables.scss which for testing I have added
body {
border: 10px solid green;
}
This works and hot reloads too the issue is any variables are not found in my components.
So my story list.stories.js imports the list component
import List from '../components/List.vue'
but within the style block I am trying use a var from the variables.scss.
<style lang="scss" scoped>
.list {
border: 1px solid $light-blue;
}
</style>
And get the error
SassError: Undefined variable: "$light-blue".
on line 204 of components/src/components/List.vue
>> border: 2px solid $light-blue;
In main.js add sass-loader to webpack config:
module.exports = {
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
additionalData: '../src/scss/variables.scss',
},
},
],
});
return config;
}
}
It works with installed css-loader#5, sass-loader#10 and style-loader#2.
If scss is not working, then you can load styles by creating preview-head.html file at config/storybook/preview-head.html
And then just load your CSS there. For example:
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/media-screen.css">
Make sure to restart Storybook dev server. npm run storybook:serve
Related
I've set up a project using Vue 3.2.33 and Vite 2.9.5
When I try to access any global variable or mixin from within any vue component, I get an undefined error. This problem doesn't occur in scss files.
The import itself seems working correctly because any css rules in it are working.
vite.config.ts:
import { fileURLToPath, URL } from 'url';
import { defineConfig } from 'vite';
import vue from '#vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url)),
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: '#use "#/styles/variables";',
},
},
},
});
src/styles/_variables.scss:
// breakpoints
$breakpoints: (
"sm": 576px,
"md": 768px,
"lg": 992px,
"xl": 1200px,
"xxl": 1400px,
);
#mixin test {
border: 3px solid red;
}
Example use:
<style scoped lang="scss">
#use 'sass:map';
.container {
max-width: 100%;
width: 100%;
margin: 0 auto;
#include test; // <- undefined
&--fluid {
max-width: 100%;
width: 100%;
}
}
$widths: (
'sm': 540px,
'md': 720px,
'lg': 960px,
'xl': 1140px,
'xxl': 1320px,
);
#each $breakpoint, $width in $widths {
#media (min-width: map.get($breakpoints, $breakpoint)) { // <- $breakpoints undefined
.container {
max-width: $width;
}
}
}
</style>
use
#import
in your vite config instead of
#use
vite.config.ts:
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData: '#import "./src/styles/variables.scss";',
},
},
},
});
keep in mind that you cannot import the same file variables.scss again in your main.ts file otherwise, you will get this error
[sass] This file is already being loaded.
by the way, you can also import the scss file in every single component manually as you mentioned but that would be really tedious so using a global import in preprocessorOptions in vite.config.ts is a much better option for files used globally like a variables.scss file.
I've managed to "fix" the issue. Turns out, when I replace all #use rules for file imports, the sass code is imported correctly and works. But this produces a new problem as the #import rules cannot be placed before #use, so I had to remove the additionalData key from config and include the imports manually.
I want to use and change global variables from other components, my files structure looks like this...
I have my variables in global.sass file, but I can't access variables in other components.
You need to set configuration file vite.config.js :
css: {
preprocessorOptions: {
scss: {
additionalData: `#import "#/assets/global.scss";`
}
}
},
also for local fonts you can add another configuration there, set alias:
resolve: {
alias: {
'#': path.resolve(__dirname, 'src'),
}
},
and then use it something like:
#font-face {
font-family: 'Opensans-Bold';
font-style: normal;
src: local('Opensans-Bold'), url(#/assets/fonts/OpenSans-Bold.woff2) format('woff2');
}
Nikola's answer is correct. For any Nuxt3 users out there I'd like to add you need to make sure you don't have explicit css config in your nuxt config file at the same time. Otherwise you might get file already imported error
A new sass module system
Note: The Sass team discourages the continued use of the #import rule. Sass
will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the #use rule instead. (Note that only Dart Sass currently supports #use. Users of other implementations must use the #import rule instead.)
More details: Here
Below is the best way to global scss at that time.
vite.config.js
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `#use "~/styles/_main.scss" as *;`,
},
},
},
plugins: [vue()],
});
styles/abstracts/_colors.scss
$default: #000000;
$default-light: #333333;
$default-dark: #000000;
styles/abstracts/index.scss
#forward './colors';
#forward ...
styles/_main.scss
#forward './abstracts';
#forward './components';
#forward './layouts';
src/index.scss => don't forget to add this import "./index.scss" in App.vue
#forward './styles/abstracts';
#use './styles/abstracts' as *;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: $font-primary;
font-size: 1.6rem;
line-height: 1.5;
text-rendering: optimizespeed;
color: $text;
overflow-y: overlay;
}
When trying to load custom local fonts in Vue CLI 3 the fonts still will not appear. I am not receiving any error messages. The inspector shows the correct rule being loaded, but fonts are falling back to serif on #app. Fonts are not showing up in my dist folder anywhere.
I have tried adding loaders in vue.config.js, changing url paths, and moving the #font-face rules around to different locations, changing the public path to ' ' and '/', importing scss into main.js.
Font loading:
#font-face {
font-family: 'OpenSans-Regular';
src: url('/assets/fonts/OpenSans-Regular.eot');
src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),
url('/assets/fonts/OpenSans-Regular.woff') format('font-woff'),
url('/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),
url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
And use within App.vue:
<style lang="scss">
#app {
font-family: 'OpenSans-Regular', serif;
}
</style>
That styling is placed within my main.scss file. The file structure as follows:
src
assets
fonts
OpenSans-Regular.eot
OpenSans-Regular.woff
etc
styles
main.scss
App.vue
vue.config.js
vue.config.js file is as follows:
module.exports = {
publicPath: '/',
css: {
sourceMap: true,
loaderOptions: {
sass: {
data: `#import "#/styles/main.scss";`
}
}
},
configureWebpack: {
module: {
rules: [{
test: /\.(ttf|otf|eot|woff|woff2)$/,
use: {
loader: "file-loader",
options: {
name: "fonts/[name].[ext]",
},
},
}]
}
}
}
I have also tried a chainWebpack in vue.config.js to no avail:
chainWebpack: config => {
config
.module
.rule("file")
.test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/,)
.use("url-loader")
.loader("url-loader")
.options({
limit: 10000,
name: 'assets/fonts/[name].[ext]'
})
.end();
}
Did you try
#font-face {
font-family: 'OpenSans-Regular';
src: url('~#/assets/fonts/OpenSans-Regular.eot');
src: url('~#/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('~#/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),
url('~#/assets/fonts/OpenSans-Regular.woff') format('font-woff'),
url('~#/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),
url('~#/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
Works for me Vue CLI 3, no vue.config.js settings.
I'm loading my styles like this:
import Vue from 'vue';
import router from './router';
import store from './store';
// eslint-disable-next-line
import styles from './scss/app.scss';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
Not sure if that is good practice.
What I ended up doing was moving to a file loader method to get the fonts to package over and set the the public path.
vue.config.js
module.exports = {
assetsDir: 'assets/',
publicPath: '/', // Base directory for dev
css: {
sourceMap: true,
loaderOptions: {
sass: {
data: `#import "#/styles/main.scss";`
}
}
},
chainWebpack: config => {
config.module
.rule("fonts")
.test(/\.(ttf|otf|eot|woff|woff2)$/)
.use("file-loader")
.loader("file-loader")
.tap(options => {
options = {
// limit: 10000,
name: '/assets/fonts/[name].[ext]',
}
return options
})
.end()
}
};
File-loader doesn't see the files unless called in the js so I imported them in main.js The console log is to navigate around the linter flagging unused imports
// Fonts need to be called in js for webpack to see and copy over
import OpenSansReg from './assets/fonts/OpenSans-Regular.ttf';
import OpenSansLight from './assets/fonts/OpenSans-Light.ttf';
import OpenSansBold from './assets/fonts/OpenSans-Bold.ttf';
console.log(OpenSansReg, OpenSansBold, OpenSansLight);
then in one of my scss files
#font-face {
font-family: 'OpenSans-Regular';
src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/OpenSans-Regular.otf') format('opentype'),
url('/assets/fonts/OpenSans-Regular.woff') format('woff'),
url('/assets/fonts/OpenSans-Regular.ttf') format('truetype'),
url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
For me, I just took out that 'format()' thing and works... Finally..
I stuck my custom icon-font in the head tags of my initial index.html page Which also has a custom font import. The same page that you would stick your <div id="vue-app"></div>. All the other pages /components can use the font-family for me.
<head>
...
<link rel="stylesheet" href="icon-font/styles.css" />
</head>
But if i try any other location in the project it fails. and the Scss doesnt even compile.
This helped me
In src folder main.js just added:
import '../src/fonts/fonts.css'
in the font the following code:
#font-face {
font-family: 'Conv4240';
src: url('~#/fonts/Conv4240/4240.eot');
src: local('☺'),
url('~#/fonts/Conv4240/4240.woff') format('woff'),
url('~#/fonts/Conv4240/4240.ttf') format('truetype'),
url('~#/fonts/Conv4240/4240.otf') format('opentype'),
url('~#/fonts/Conv4240/4240.svg') format('svg');
font-weight: normal;
font-style: normal;
}
And everything started to work
After upgrading to Nuxt.js 2, I noticed that about 30 CSS files are loaded when the homepage loads. I actually noticed it when I checked Google Pagespeed Insights and saw about 30 "blocking CSS resources".
Is there any setting for lazy loading them or something like that?
Nuxt2 has the code splitting and you can use the every css files in the current page only so you have 2 way for bundling css, first is the common css in the all project and second is an isolate css file for each page. use the scoped attribute in the style tag.
for example:
//////// sample.vue//////
<template>
write somethin.....
</template>
<script>
write som,ething.....
</script>
<style lang="scss" scoped>
body {
background-color: gray;
color: #9e9e9e;
}
</style>
export default {
build: {
extractCSS: true,
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css)$/,
chunks: 'all',
enforce: true
}
}
}
}
}
}
https://github.com/nuxt/nuxt.js/issues/3166#issuecomment-423832425
I added the package
yarn add themify-icons-sass
then in my component , I imported it in the script and in the style
<script>
....
import 'themify-icons-sass'
<style lang="scss" scoped>
#import 'themify-icons-sass/themify-icons';
...
but I get a build error
This dependency was not found:
* themify-icons-sass in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/HelloWorld.vue
To install it, you can run: npm install --save themify-icons-sass
Where am I wrong in the import ? thanks for feedback
UPDATE
First, if I want o import it from ./node_modules , then the #import should NOT BE in a scoped style...
So I moved it to a global style in my App.vue
<style lang="scss">
#import "~themify-icons-scss/scss/themify-icons.scss";
#app { ...
Then I got an erro , the node-sass/vendor directory was not bulit.. so I add to rebuild node_sass
yarn add node-sass --force
Now it's taking in account the package but I get another error related to the relative path to the fonts:
These relative modules were not found:
* ../fonts/themify.eot in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-
loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../fonts/themify.eot?-fvbane in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasIn
lineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../fonts/themify.svg?-fvbane in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasIn
lineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../fonts/themify.ttf?-fvbane in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../fonts/themify.woff?-fvbane in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
the themify-icons-scss file structure is the following :
node_modules/themify-icons-scss
fonts
themify.eot
themify.svg
themify.ttf
themify.woff
scss
_core.scss
_extras.scss
_icons.scss
_mixins.scss
_paths.scss
_variables.scss
themify-icons.scss
node_modules/themify-icons-scss/scss/themify-icons.scss
#import "variables";
#import "mixins";
#import "path";
#import "core";
#import "extras";
#import "icons";
themify-icons-scss/scss/_path.scss
#font-face {
font-family: 'themify';
src:url('#{$ti-font-path}/themify.eot?-fvbane');
src:url('#{$ti-font-path}/themify.eot?#iefix-fvbane') format('embedded-opentype'),
url('#{$ti-font-path}/themify.woff?-fvbane') format('woff'),
url('#{$ti-font-path}//themify.ttf?-fvbane') format('truetype'),
url('#{$ti-font-path}/themify.svg?-fvbane#themify') format('svg');
font-weight: normal;
font-style: normal;
this is where there is some issue... with the $ti-font-path as defined in the variables, relative to the scss directory in the package..
themify-icons-scss/scss/_variables.scss
$ti-font-path: "../fonts" !default;
$ti-class-prefix: "ti" !default;
}
SOLVED...
there is a nice recent package ( updated 3 months go, I forked it as an archive for me ..). see themify-icons-scss
yarn add git+http://github.com/Frolki1-Dev/themify-icons-sass
to solve the issue with the relative font path variable in the package _path.scss , I added the package resolve-url-loader. ( see resolve-url-loader on github
yarn add resolve-url-loader --dev
And as per the resolve-url-loader readme, as I want to use webpack loaders I inserted into build/utils
build/utils.js
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// added resolve-url-loaderr with sourceMap true
const resolveUrlLoader = {
loader: 'resolve-url-loader',
options: {
sourceMap: options.sourceMap
}
}
In my App.vue I can import (global , cannot be scoped)
<style lang="scss">
#import "~themify-icons-scss/scss/themify-icons.scss";
#app {
...
And I can check the themify-icons in my component template
<h2>Test Themify Icons</h2>
<div class="row" style="margin-bottom: 30px;">
<div class="col-4"></div>
<div class="col-4">
<span class="ti-email"> Email Me</span>
</div>
</div>