nuxt-modules / style-resources Goto Github PK
View Code? Open in Web Editor NEWStyle Resources for Nuxt 3
License: MIT License
Style Resources for Nuxt 3
License: MIT License
I am importing bootstrap which probably accounts for the slowness, but it seems scss is being compiled twice - once for client and again for server:
Profile results for Client
> Stats by Ext
Ext Requests Time Time/Request Description
vue 69 1m 975ms Vue Single File components
Total 69 1m
> Stats by Loader
Loader Requests Time Time/Request Description
css-loader 69 1m 975ms Css-loader
vue-loader 138 2m 975ms Vue-loader
postcss-loader 69 1m 975ms Postcss-loader
sass-loader 69 1m 975ms Sass-loader
sass-resources-loader 69 1m 975ms Sass-resources-loader
Total 414 7m
Profile results for Server
> Stats by Ext
Ext Requests Time Time/Request Description
vue 69 1m 940ms Vue Single File components
Total 69 1m
> Stats by Loader
Loader Requests Time Time/Request Description
css-loader 69 1m 940ms Css-loader
vue-loader 138 2m 940ms Vue-loader
postcss-loader 69 1m 940ms Postcss-loader
sass-loader 69 1m 940ms Sass-loader
sass-resources-loader 69 1m 940ms Sass-resources-loader
Total 414 6m
My nuxt.config.js
module.exports = {
mode: 'universal',
head: {
title: pkg.name,
...
},
plugins: [
...
],
// Nuxt.js modules
modules: [
// https://bootstrap-vue.js.org/docs/
['bootstrap-vue/nuxt'],
'@nuxtjs/style-resources',
...
],
bootstrapVue: {
bootstrapCSS: false,
bootstrapVueCSS: true
},
// https://github.com/nuxt-community/style-resources-module
styleResources: {
scss: [
'./assets/scss/overrides/*.scss',
'./assets/scss/custom.scss',
'./assets/scss/vars/*.scss',
'./assets/scss/mixins/*.scss',
'./assets/scss/styles/*.scss'
]
},
// Build configuration
build: {
optimizeCSS: true,
profile: process.env.NODE_ENV !== 'production',
// You can extend webpack config here
extend (config, ctx) {
...
}
}
}
For reference, here is my custom.scss bootstrap import:
// required
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
// optional
//@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
//@import "~bootstrap/scss/breadcrumb";
//@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
//@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/alert";
//@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/media";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
//@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/print";
// Bootstrap Vue: https://bootstrap-vue.js.org/docs
// Removed in an attempt to speed up compilation
//@import "~bootstrap-vue/dist/bootstrap-vue";
A faster build, and scss resources should only be compiled for the client
Horrible build times and double compilation.
I have both StyleResources and normal Nuxt CSS. How can I force StyleResources to run before normal Nuxt CSS feature?
Because I don want to my CSS files be overwritten by StyleResources.
Whenever i add a variable to my global css for example
$margin-small: 12 + 'px';
and I use it in my component as
a.button:not(:first-child) {
margin-top: $margin-small;
}
then my css wont work because it is parsed as:
margin-top: "12px" instead of margin-top:12px
Does anyone know how to fix this?
Nuxt has built-in global css property in nuxt.config.ts:
css: [
{
src: '@/assets/scss/file.scss',
lang: 'scss'
}
]
We can include actual styles using this property. Using styleResources
we can globally inject variables, mixins, functions in to every component, but built-in css
property does the same?
Hello everyone!
I am trying to build my Nuxt.js project with @nuxtjs/style-resources
installed.
Yesterday everything worked perfectly, but today i am getting this error:
FATAL Module should export a function: @nuxtjs/style-resources 09:53:55
at ModuleContainer.addModule (node_modules\@nuxt\core\dist\core.js:168:13)
at promise.then (node_modules\@nuxt\utils\dist\utils.js:1796:43)
Error: Module should export a function: @nuxtjs/style-resources
at ModuleContainer.addModule (D:\My Stuff\foto-denik\node_modules\@nuxt\core\dist\core.js:168:13)
at promise.then (D:\My Stuff\foto-denik\node_modules\@nuxt\utils\dist\utils.js:1796:43)
This is my config:
modules: [
'@nuxtjs/axios',
'@nuxtjs/pwa',
'@nuxtjs/auth',
'@nuxtjs/style-resources',
],
styleResources: {
scss: [
'~/assets/scss/_variables.scss'
]
},
Does anyone have an idea what could cause this error?
Thank you for every answer!
Let's say I have a variable:
$primary: color(indigo);
The color(..) is a function which returns hex value from the color palette I've defined somewhere else:
indigo: ( lighter: #f4f5fa, light: #b3bcf5, base: #5c6ac4, dark: #202e78, darker: #000639, text: #3e4155, ),
when I try to use it inside vue component, in a way like
color: $primary
But when I inspect it on my browser it's not getting me the hex value I mapped - which should be #5c6ac4
, instead I get literally the function, like: color: color(indigo)
.
Is that possible the resource loader would pre-compile the variable before passing it down to the vue components?
Thank you!
When using this module, the css (scss) is imported multiple times ( to be exact, every component, which uses a style block loads the whole scss from the modules )
shouldn't this be merged to a single import, so that the scss isn't imported 50 times, when using 50 components?
I have tried to pull in Bulma mixins like this:
styleResources: {
scss: [
'~/assets/styles/_bulma_variables.scss', // this works
'~/assets/styles/_variables.scss', // this works
'~/assets/styles/_variables.scss' // this works
],
sass: [
'@bulma/sass/utilities/mixins.sass' // this doesnt work
]
},
But when I try to use the mixin in my compoonent, like so:
@include desktop {
.navbar {
display: none;
}
}
It doesn't work, and I get error: SassError: no mixin named desktop
Hi, when I have CSS Variables imported as a partial SCSS file, it doesn't get compiled.
Here is my setup:
nuxt.config.js
export default {
modules: ['@nuxtjs/style-resources'],
styleResources: {
scss: [
'./assets/styles/index.scss'
]
}
}
_root.scss
:root {
// colors
--brand: #D7E8BA;
--brand-dark: #7F8C76;
...
}
index.scss
...
@import "./root";
...
I'm fairly certain it has something to do with the style-resources
module for two reasons:
[1] With style-resources
still turned on, If I put a :root
selector in the component and leave it empty then it compiles fine
eg:
<style lang="scss">
:root {}
</style>
[2] I turn style-resources
off and simply import the SCSS file directly in the components style tag then it compiles fine.
eg:
<style lang="scss">
@import "~/assets/styles/index";
</style>
At first, I thought it might be purgecss
that was causing the issue - but even with purgecss
turned off I still have the same issues.
Everything is working great with the package thus far. I have a stylus file holding my global variables and can access them in .vue files, as expected. I'm wondering if there is any way to access these variables within Vue components, inline-like.
For example:
Variable Defintion:
// style.styl
...
$yellow ?= #fad569
...
This works:
<!-- my-component.vue -->
...
<style lang="stylus" scoped>
.myClass
color $yellow
</style>
This does not work (Vuetify is being used here):
<!-- my-component.vue -->
<v-tabs slider-color="$yellow" slider-size="4">
...
</v-tabs>
Is there any way currently to do this?
I wanted to declare the assets like so but it doesn't want to work. I tried all paths.
[
'@nuxtjs/style-resources', {
scss: [ "~css/variables.scss"],
}
]
It only works with this Syntax, could someone explain why or what im doing wrong?
modules: ["@nuxtjs/style-resources"],
styleResources: {
scss: ["~css/variables.scss"]
},
Following up on the #29 issue that is now closed.
There seems to be an issue with style-resources-module
and TypeScript support.
I have a minimal, reproducible template:
vue init scaleleap/nuxt-typescript-template style-resources-module-ts-error
cd style-resources-module-ts-error
npm i
npm run dev
Errors out with:
ERROR Failed to compile with 1 errors friendly-errors 13:02:30
ERROR in ./pages/index.vue?vue&type=style&index=0&lang=scss& friendly-errors 13:02:30
Module build failed (from ./node_modules/sass-loader/lib/loader.js): friendly-errors 13:02:30
background-color: $body-bg;
^
Undefined variable: "$body-bg".
in /private/tmp/your-project-name/pages/index.vue (line 14, column 21)
friendly-errors 13:02:30
@ ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=style&index=0&lang=scss& 4:14-369 14:3-18:5 15:22-377
@ ./pages/index.vue?vue&type=style&index=0&lang=scss&
@ ./pages/index.vue
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
Template source: https://github.com/ScaleLeap/nuxt-typescript-template
Thank you for your attention.
I need to import sass-mq before I include my custom variable, function and mixins files. Is there a recommended way to do this? Below is a working example using Vue, vue.config.js.
module.exports = { css: { loaderOptions: { sass: { data:
@import '~sass-mq';
@import "@/styles/variables.scss";
@import "@/styles/functions.scss";
@import "@/styles/mixins.scss";
@import "@/styles/fonts.scss";
} } } };
I followed the tutorial to setup the module.
and the following warning occurred.
WARN Legacy styleResources detected. Will take over but ignore all other rules. Please move the rules to the top-level styleResources key
this is my nuxt.config.js
snippet.
css: ['~/assets/css/normalize.css'],
modules: [
'@nuxtjs/style-resources',
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
// Doc: https://github.com/nuxt-community/dotenv-module
'@nuxtjs/dotenv'
],
build: {
transpile: [/^element-ui/],
styleResources: {
scss: '~assets/scss/_color.scss'
},
}
How can I resolve this warning.
Doesn't seem to be working for PostCSS files. Does it? Can it?
When I use CSS property -webkit-box-orient in my mixin.scss, this property cannot be found in the Chrome pannel after build. So that property cannot work in my app.
I have a fresh installation of nuxt with nothing but this package installed.
The config is as such:
css:
[
'@/assets/scss/defaults.scss'
],
styleResources:
{
sass: [],
scss: ['@/assets/scss/imports/*.scss'],
less: [],
stylus: []
},
Now, the file that package is meant to import is:
assets/scss/imports/fonts.scss
Which only contains this:
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,700|Quicksand:400,700");
.. and the error is:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): friendly-errors 16:54:59
SassError: @import directive requires a url or quoted path
on line 1 of D:\Laragon\www\Project\app\layouts\default.vue
>> @import ../assets/scss/imports/url("http:/fonts.googleapis.com/css?family=Op
Note: I've tried all variations of it, with and without url, with and without quotation marks, ending url with .css and so on.
Cannot read property 'forEach' of undefined
Hi,
I have a issue with importing files in SCSS/Sass. It just doesn't import variables/mixins. Also I noticed that once it worked - but I can't repeat it. Basically it doesn't work at all.
This is nuxt.config.js
/*
** Nuxt.js modules
*/
modules: ["@nuxtjs/style-resources"],
/*
** Deafult SCSS Files import - requirments for all components
*/
styleResources: {
scss: ["./assets/scss/toolbelt"]
},
My folder structure from root:
And this is use of mixin/variable in index.vue
<style lang="scss" scoped>
.links {
margin: rem(20);
color: $black;
}
</style>
thx for any help - if this works - it's great help
My website suppose to support several brands so multiple themes is a necessity but building time because of that is enormous.
I assume it is because this module tries to access all scss files and resolve variables.
Is there a way to ignore specific directory that is inside my project and contain several bootstrap sass themes inside?
I have the error:
"Semicolons aren't allowed in the indented syntax."
Config:
styleResources: {
scss: ['./assets/styles/vuetify/variables/_vuetify.scss'],
less: [],
stylus: []
}
I think the problem is because , the module import to sass files too (I want the import too in sass files)
I fixed using the data option from sass-loader, but I wish use this module
Hey, thanks for the package.
I was wondering if anyone else has problems using this with nuxt-ts
that came with nuxt 2.4 ?
I've gone through the example, and through issues here on github to make sure my set up is correct but I cannot seem to get working.
In my case, I'm trying to import scss
variables.
modules: [
'@nuxtjs/axios',
'@nuxtjs/dotenv',
'@nuxtjs/style-resources',
],
styleResources: {
scss: '@/assets/styles/_variables.scss',
},
...
"scripts": {
"dev": "nuxt-ts",
"build": "nuxt-ts build",
"start": "nuxt-ts start",
"lint": "prettier --no-semi --single-quote --write **/*.js **/*.vue !test/target/** !dist/**",
"generate": "nuxt-ts generate",
"precommit": "npm run lint"
},
"dependencies": {
...
"@nuxtjs/style-resources": "^0.1.1",
"nuxt-ts": "^2.4.0",
...
},
"devDependencies": {
...
"@types/node": "^10.12.19",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"ts-loader": "^5.3.3",
"typescript": "^3.2.4"
...
}
...
Thanks for your help and suggestions.
Hi there,
I am trying to use @nuxtjs/style-resources
from a module but I can't get it to work.
I have a config like:
styleResources: {
scss: [
'~/theme/styles/abstracts/*.scss'
]
},
Passing it to the module directly doesn't work:
this.requireModule(['@nuxtjs/style-resources', {
scss: [
'~/theme/styles/abstracts/*.scss'
]
} ])
Using path.resolve(__dirname, './styles/abstracts/*.scss')
doesn't work either.
Settings these options as this.options.styleResources = { ... }
doesn't work.
However the exact same config as mentioned above works when I put it into my nuxt.config.js
directly.
Any ideas?
This module uses glob-all
, which uses yargs
version 1.2.6
—yargs
latest is 15.3.1
(1.2.6
is more than 5 years old).
We have been alerted of a high priority vulnerability in minimist
, a dependency of that version of yargs
, CVE-2020-7598.
For now we have had to switch to using style-resources-loader
manually, although this can be fixed by either replacing glob-all
or using this fork of it (until it's merged upstream): jpillora/node-glob-all#17
Please let me know if this would be possible as it would be great to get back to using this library if possible, and I'm sure many other users of this module will require the same.
(Side note: it would seem that the main module glob-all
doesn't even use yargs
, its CLI does—which presumably this module does not use.)
打包出来的css都包含到了html文件里,能单独打包出来到css文件码
Whenever I use a scoped style that has specific Stylus grammar like '/' for comments, I get a build error such as
Module build failed (from ./node_modules/vue-loader/lib/loaders/stylePostLoader.js):
Error: Unexpected '/'. Escaping special characters with \ may help.
at Root._error (/app/node_modules/postcss-selector-parser/dist/parser.js:160:16)
at Root.error (/app/node_modules/postcss-selector-parser/dist/selectors/root.js:43:19)
at Parser.error (/app/node_modules/postcss-selector-parser/dist/parser.js:726:21)
at Parser.unexpected (/app/node_modules/postcss-selector-parser/dist/parser.js:744:17)
at Parser.combinator (/app/node_modules/postcss-selector-parser/dist/parser.js:642:12)
at Parser.parse (/app/node_modules/postcss-selector-parser/dist/parser.js:1081:14)
at Parser.loop (/app/node_modules/postcss-selector-parser/dist/parser.js:1023:12)
at new Parser (/app/node_modules/postcss-selector-parser/dist/parser.js:150:10)
at Processor._root (/app/node_modules/postcss-selector-parser/dist/processor.js:55:18)
at Processor._runSync (/app/node_modules/postcss-selector-parser/dist/processor.js:102:21)
at Processor.processSync (/app/node_modules/postcss-selector-parser/dist/processor.js:199:23)
at rewriteSelector (/app/node_modules/@vue/component-compiler-utils/dist/stylePlugins/scoped.js:65:12)
at Root.each (/app/node_modules/postcss/lib/container.js:101:16)
at /app/node_modules/@vue/component-compiler-utils/dist/stylePlugins/scoped.js:16:10
at LazyResult.run (/app/node_modules/postcss/lib/lazy-result.js:295:14)
at LazyResult.sync (/app/node_modules/postcss/lib/lazy-result.js:281:26)
As soon as the style isn't scoped anymore I don't have any trouble. That also doesn't happen if I'm not using style-resources-module.
My nuxt.config.js:
...
modules: [ ..., '@nuxtjs/style-resources', ... ],
...
styleResources: {
stylus: ['~assets/style/main.styl']
},
...
My guess is that Webpack is using a different loader when I have a scoped style tag but I don't know how I could verify or fix that.
Storybook complaining scss variable doesn't exists. I'm wondering how I can use this plugin with Storybook. Can I configure webpack.config.js
of Storybook to inject style in each components?
(Related #25)
When importing scss/sass library like mathsass.
It works in style-resources-module,
srcDir: 'src',
styleResources: {
scss: [
'~/../node_modules/mathsass/dist/_math.scss'
]
},
and it don't.
srcDir: 'src',
styleResources: {
scss: ['mathsass']
},
But does below one seem to be more smarter? (nuxt-sass-resources-loader could.)
I know I know, this seems so silly, but my IDE (webstorm) auto-pulls this when hovering package.json
and it pulls in all of the [![npm...
stuff.
Here's a weird GIF of it:
https://d.pr/i/dXl432
Pass in a "variables" object, eg.
export default {
primary: 'green';
secondary: 'red';
}
and map it to
$primary: green;
$secondary: red;
(for SASS/LESS/Stylus)
Returns an error on build time
This relative module was not found:
* ./default.vue?vue&type=style&index=1&lang=scss& in ./layouts/default.vue
If style block in layout removed - it just repeats the error for any vue-file that has scss in it.
config:
styleResources: { scss: '@/assets/variables.scss' },
Hi,
I'm using Nuxt with Bulma with Buefy and I would like to import only the Bulma components where I need it, but I got an error when import the scss component in a vue/nuxt components even if I added the style-resources-module and the variables and utilities files. Is it possible to do it or I misunderstood the capacity of this module.
My nuxt config file:
'@nuxtjs/style-resources',
['nuxt-buefy', {
css: false
}]
],
styleResources: {
scss: [
'./assets/vars/*.scss',
'./assets/custom-styles.scss',
'./assets/abstracts/_mixins.scss'
]
},
my assets/vars/init.scss:
// Set your brand colors
$black: #272322;
$white: #FFFFFF;
// Update Bulma's global variables
$family-sans-serif: "Heebo", sans-serif;
$link: $white;
// Update some of Bulma's component variables
$body-background-color: $black;
$body-color: $white;
$control-border-width: 1px;
my custom-styles.scss:
@import "~bulma/sass/utilities/_all";
@import "~bulma/sass/base/_all";
and finally my TheNavbar.vue component:
<style lang="scss" scoped>
@import "~/node_modules/bulma/sass/components/navbar.sass";
</style>
I got an error that says $background is not defined, but it is in the Bulma utilities files. I was thinking that style-resource-modules exposed the variables without the need to import it every where I want to use it.
Thank you
I am trying to use Google Fonts variable inside my components, but I am unable to make it work.
My directory structure
.
├── assets
| └── styles
| ├── main.scss
| └── vars
| └── _colors.scss
nuxt.config.js
export default {
/* Global CSS */
css: [
'@/assets/styles/main.scss',
],
modules: ['@nuxtjs/style-resources'],
styleResources: {
scss: [
'./assets/vars/_colors.scss'
]
}
}
main.scss
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Serif:600');
$serif_family: 'IBM Plex Serif', serif;
.ymca {
font-family: $serif_family;
}
_colors.scss
$gray: #333;
test.vue
<template>
<div class="ymca">
Test
</div>
</template>
<style lang="scss">
.ymca {
color: $gray;
}
</style>
Now, I am able to set the font to the Google font to the div if I set it in the main.scss
, but not if I set it in test.vue
. Not sure if this is by design or if there is a better way to set font in the component locally?
When using one of the "use nuxt programmatically" examples from nuxt docs, the build will error out saying that variables and mixins are not found. (The ones defined in the scss files loaded by this module). When building the same project using yarn build, it works fine.
I created a sandbox based on template.nuxtjs.org that replicates this issue:
https://codesandbox.io/s/codesandbox-nuxt-l6kos
I changed the following things in the template:
I added a script inside package.json that builds the project programmatically (taken from nuxt docs). If you open codesandbox and run yarn build, it will run. If you run yarn buildnuxt (which calls the script), it will complain about the scss variable.
Both of these are accessible in code sandbox from the "server control panel" menu on the left.
Does this library support resource from node_modules? For example Foundation framework. Specifying it like this:
styleResources: {
scss: [
'foundation-sites/scss/foundation.scss',
]
},
does not work.
Hi,
Is it possible to share scss variables between js and scss with that library?
0.1.2 (latest)
https://codesandbox.io/s/4892kvx3w0
2 scenarios:
extractCSS; true
=> getting css files for each page of the size of the whole library (bootstrap here)extractCSS; false
or undefined => getting js files of the size of the whole library (bootstrap here)hence
extractCSS
accordinglyyarn build
the bundle should only include used style references
the bundle includes the whole library in each page and build may take forever in a real implementation (especially with extractCSS; false
)
How can I load the scss files from external like bootstrap?
styleResources: {
scss: [
'https://cdn.jsdelivr.net/npm/[email protected]/scss/_functions.scss',
'https://cdn.jsdelivr.net/npm/[email protected]/scss/bootstrap.scss',
'https://cdn.jsdelivr.net/npm/[email protected]/scss/_variables.scss',
'https://cdn.jsdelivr.net/npm/[email protected]/scss/_mixins.scss'
]
},
I tried to add url(' ') with no luck, thanks in advance
Hello, I get this error when I try to run yarn run dev/build/generate
My dependencies.
"dependencies": {
"@nuxtjs/style-resources": "^1.0.0",
"node-sass": "^4.12.0",
"normalize.css": "^8.0.1",
"nuxt": "^1.0.0",
"sass-loader": "^7.3.1"
},
nuxt.config.js
/*
** Global CSS
*/
css: ['@/assets/scss/app.scss'],
/*
** Plugins to load before mounting the App
*/
plugins: [],
/*
** Nuxt.js modules
*/
modules: ['@nuxtjs/style-resources'],
/*
** Global style resources
*/
styleResources: {
scss: ['@/assets/scss/_variables.scss', '@/assets/scss/_mixins.scss']
},
Hi people,
when I use attribute lang=... in tag style the console generated this error:
Module build failed (from ./node_modules/sass-loader/lib/loader.js)....
File to import not found or unreadable: abstracts/functions.
in /.../components/Header.vue (line 4, column 1)
"@nuxtjs/style-resources": "^0.1.2",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0"
sass-loader 9 released with number of breaking changes, which style-resources does not support.
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): friendly-errors 20:44:22
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'prependData'. These properties are valid:
object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }
at validate (C:\Users\danil\WebstormProjects\mypolytech-student-frontend\node_modules\schema-utils\dist\validate.js:96:11)
at Object.loader (C:\Users\danil\WebstormProjects\mypolytech-student-frontend\node_modules\sass-loader\dist\index.js:30:28)
friendly-errors 20:44:22
@ ./node_modules/cache-loader/dist/cjs.js??ref--7-oneOf-1-0!./node_modules/thread-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-style-loader??ref--7-oneOf-1-2!./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/vue-loader/lib/loaders/
stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-4!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-5!./node_modules/sass-resources-loader/lib/loader.js??ref--7-oneOf-1-6!./node_modules/vuetify-loader/lib/loader.js??ref--18-0!./node_modul
es/vue-loader/lib??vue-loader-options!./src/layouts/default.vue?vue&type=style&index=1&id=39336072&lang=scss&scoped=true& 4:14-540 14:3-18:5 15:22-548
@ ./src/layouts/default.vue?vue&type=style&index=1&id=39336072&lang=scss&scoped=true&
@ ./src/layouts/default.vue
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
After upgrading from nuxt 2.10.1 to 2.10.2 our build fails with the following error:
ERROR in ./node_modules/vuetify/src/components/VBadge/VBadge.sass (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VBadge/VBadge.sass)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options
options should NOT have additional properties
at validateOptions (/…/node_modules/schema-utils/src/validateOptions.js:32:11)
at Object.loader (/…/node_modules/css-loader/dist/index.js:44:28)
After hours of investigation I found out that removing this module let work the build again. But removing this module also means removing global sass variables and mixins etc. So could not be a solution.
The error comes from css-loader and maybe it depends on a breaking change of handling loader-options
I compared the versions of css-loader and it seems that this could be the cause:
yarn why css-loader
with 2.10.1:
$ yarn why css-loader
yarn why v1.19.1
[1/4] 🤔 Why do we have the module "css-loader"...?
[2/4] 🚚 Initialising dependency graph...
[3/4] 🔍 Finding dependency...
[4/4] 🚡 Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
- "vuepress#@vuepress#core" depends on it
- Hoisted from "vuepress#@vuepress#core#css-loader"
info Disk size without dependencies: "328KB"
info Disk size with unique dependencies: "2.43MB"
info Disk size with transitive dependencies: "6.63MB"
info Number of shared dependencies: 32
=> Found "@storybook/core#[email protected]"
info This module exists because "@storybook#vue#@storybook#core" depends on it.
info Disk size without dependencies: "144KB"
info Disk size with unique dependencies: "2.29MB"
info Disk size with transitive dependencies: "6.45MB"
info Number of shared dependencies: 32
=> Found "@nuxt/webpack#[email protected]"
info This module exists because "nuxt#@nuxt#webpack" depends on it.
✨ Done in 1.23s.
and after upgrading to 2.10.2
$ yarn why css-loader
yarn why v1.19.1
[1/4] 🤔 Why do we have the module "css-loader"...?
[2/4] 🚚 Initialising dependency graph...
[3/4] 🔍 Finding dependency...
[4/4] 🚡 Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "css-loader"
info Reasons this module exists
- Hoisted from "@storybook#vue#@storybook#core#css-loader"
- Hoisted from "nuxt#@nuxt#webpack#css-loader"
info Disk size without dependencies: "124KB"
info Disk size with unique dependencies: "2.21MB"
info Disk size with transitive dependencies: "6.37MB"
info Number of shared dependencies: 32
=> Found "@vuepress/core#[email protected]"
info This module exists because "vuepress#@vuepress#core" depends on it.
✨ Done in 1.00s.
I'm at a loss and need some tips.
odule build failed (from ./node_modules/stylus-loader/dist/cjs.js): friendly-errors 15:01:16
ValidationError: Invalid options object. Stylus Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'import'. These properties are valid:
object { stylusOptions?, sourceMap?, webpackImporter?, additionalData? }
at validate (C:\Users\veneg\Desktop\qonversation\node_modules\stylus-loader\node_modules\schema-utils\dist\validate.js:104:11)
at Object.stylusLoader (C:\Users\veneg\Desktop\qonversation\node_modules\stylus-loader\dist\index.js:24:29)
friendly-errors 15:01:16
@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/stylus-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/frames/page-aside.vue?vue&type=style&index=0&lang=stylus& 4:14-452 14:3-18:5 15:22-460
@ ./components/frames/page-aside.vue?vue&type=style&index=0&lang=stylus&
@ ./components/frames/page-aside.vue
@ ./layouts/default.vue
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi ./node_modules/@nuxt/components/lib/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
I actually faced the problem of @import working on a NuxtJS project and ended up asking Stackoveflow. I then found your library which's a great idea, I thought this would be the solution but the problem remains the same...
When you use your loader, for each component present on the page it'll duplicate the styling on the page, and it'll be visible on the chrome developer tools as referred here https://stackoverflow.com/questions/54793275/global-styling-vs-local-styling-in-vuejs
Is there a way to load the SCSS on top of something and avoid this duplication ? It makes the page way heavier in development...
Thanks
PS: the problem is bigger than what we could think, it confuses the order of the rules in CSS because it loads it from everywhere at random time, so you can hardly make any shared logic at some point ...
Wildcard import — causing error
Dot import — simple not working
# Nuxt.js modules
modules:
[
'@nuxtjs/style-resources'
'./modules/coffeescript'
]
styleResources:
stylus:
[
'~assets/*.styl'
or './assets/*.styl'
'~assets/mixins.styl'
'~assets/card-base.styl'
]
npx nuxt build →
Version: webpack 4.29.6
ERROR in ./components/GHCard.vue?vue&type=style&index=0&id=0e928d29&lang=stylus&scoped=true& (./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/stylus-loader??ref--10-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./components/GHCard.vue?vue&type=style&index=0&id=0e928d29&lang=stylus&scoped=true&)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot read property 'type' of undefined
and so on
"dependencies": {
"@nuxtjs/style-resources": "^0.1.2",
"axios": "^0.18.0",
"coffee-loader": "^0.8.0",
"coffeescript": "^2.0.1",
"nuxt": "*",
"pug": "^2.0.3",
"pug-plain-loader": "^1.0.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2"
}
My nuxt.config.js (Nuxt: 2.8.1)
import pkg from './package'
export default {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#012353' },
/*
** Global CSS
*/
css: [
// External CSS Libs
'~/assets/css/libs/animate.css'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
{ src: '~/plugins/vue-masonry', ssr: false },
{ src: '~/plugins/vue-rellax', ssr: false },
{ src: '~/plugins/vue-simplebar'}
],
/*
** Nuxt.js modules
*/
modules: [
'@nuxtjs/style-resources',
// Doc: https://bootstrap-vue.js.org/docs/
'bootstrap-vue/nuxt',
'@nuxtjs/axios',
],
/*
** SCSS Global
*/
styleResources: {
scss: [
// App Global SCSS
'~/assets/scss/app.scss'
]
},
/*
** Axios Config
*/
axios: {
// proxyHeaders: false
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
}
}
My package.json
...
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"json:server": "json-server --watch ./static/json/db.json --port 3004 --read-only --delay 1000",
"now-build": "nuxt generate"
},
"dependencies": {
"@nuxtjs/axios": "5.5.4",
"bootstrap": "4.1.3",
"bootstrap-vue": "2.0.0-rc.26",
"cross-env": "^5.2.0",
"nuxt": "2.8.1",
"swiper": "4.5.0",
"vue-content-loading": "1.6.0",
"vue-masonry": "0.11.7",
"vue-rellax": "0.1.0",
"vue-simplebar": "1.0.0"
},
"devDependencies": {
"@nuxtjs/style-resources": "0.1.2",
"node-sass": "4.11.0",
"nodemon": "1.18.9",
"pug": "2.0.3",
"pug-plain-loader": "1.0.0",
"sass-loader": "7.1.0"
}
}
My app.scss
// utilities
@import 'utilities/browserhack';
@import 'utilities/variables';
@import 'utilities/mixins';
@import 'utilities/general';
@import 'utilities/extra';
// shared
@import 'shared/lab-elements';
@import 'shared/layout';
When I make changes to any imported file, the scss compilation takes 20-25 seconds.
Why?
I found it bug when using .sass
.
$colors: (
"white": ($white, $black),
"black": ($black, $white)
);
$colors: ( "white": ($white, $black), "black": ($black, $white) );
version: 0.1.2
Hi, I came across an issue, when I @import *.scss files from liked node packages. https://docs.npmjs.com/cli/link.html
I use a global main.scss file, that includes Bulma packages by cascading imports. That means I load
main.scss
> _all.scss
>> components/_all.scss
>>> navbar.scss
>>>> ~bulma_scss/scss/components/navbar.scss
I import all Bulma's scss files like this and there are some mine packages too so it's about 200+ files. Compilation time in dev mode is about 10s, it's slow, but still, I can live with that. The issue is when I import any scss file from my package, that is in node_modules linked by npm's link https://docs.npmjs.com/cli/link.html then compilation time is more than 60s and that's too much.
Is there any way to solve this issue or any idea? I don't have this issue in my other non-nuxt project's that compiles these files with webpack's sass-loader. Thank you.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.