Styjun

If magnetic force can't do any work, then how can we define a potential?

First Number to Contain Each Letter

If I have an accident, should I file a claim with my car insurance company?

Is the interior of a Bag of Holding actually an extradimensional space?

Round away from zero

Fantasy Military Arms and Armor: the Dwarven Grand Armory

Is there any difference between these two sentences? (Adverbs)

Does blackhole merging breaks their event horizon seggregation?

Is there any reason to change the ISO manually?

Low quality postdoc application and deadline extension

'This one' as a pronoun

How do I anonymously report the Establishment Clause being broken?

Numerical minimum of a one-valued function

Tiny image scraper for xkcd.com

What quests do you need to stop at before you make an enemy of a faction for each faction?

What is the majority of the UK Government as of 2019-09-04?

Was Rosie the Riveter sourced from a Michelangelo painting?

Left my gmail logged in when I was fired

Do I have to rename all creatures in a new world?

Can doublestrike kill a creature with totem armor?

Is using different public keys for different peers safer than reusing the public key, beyond forward secrecy - x25519

How do I stop making people jump at home and at work?

How were the names on the memorial stones in Avengers: Endgame chosen, out-of-universe?

Do 643,000 Americans go bankrupt every year due to medical bills?

How to import CSS frameworks in Vue/Nuxt.js locally?

How to force the browser to reload cached CSS/JS files?How to apply CSS to iframe?How do I give text or an image a transparent background using CSS?How to write a:hover in inline CSS?How to style a <select> dropdown with only CSS?How to apply !important using .css()?How can I transition height: 0; to height: auto; using CSS?How can I remove a style added with .css() function?How do CSS triangles work?How do I vertically center text with CSS?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I have a couple of CSS frameworks stored in the assets folder of my project, I previously had them in the static folder and everything was working fine. However, I decided to switch over some files from the static to the assets folder, and I'm having trouble linking the stylesheet.

Inside the assets folder, there's a folder called "css", in which I store all the frameworks.

My goal is to link the frameworks to the components that depend on them, in the components folder. Previously, as mentioned, the stylesheets were in the static folder and worked fine.

However, every attempt I have made so far results in the "/* style not found */" page. The images, which are in the assets folder as well, inside a folder called "img", work fine.

I have attempted using the following links for the css:

"~/assets/css/materialize.css"

"~assets/css/materialize.css"

"@/assets/css/materialize.css"

"@assets/css/materialize.css"

"assets/css/materialize.css"

"/assets/css/materialize.css"

"css/materialize.css" (That's what I used to link when using the static folder)

Every attempt resulted in the same "/* style not found */" page, by following the link in the source code.

Here's the component's head:

head: 
 link:[ 
 
 rel:'stylesheet',
 type:'text/css',
 href:'~assets/css/materialize.css'
 
 ]

javascript css css3 vue.js nuxt.js

share|improve this question

edited Mar 28 at 4:09

Udhav Sarvaiya

3,1811010 gold badges2121 silver badges3333 bronze badges

asked Mar 28 at 3:41

SlinsSlins

2344 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  try this way <style lang="scss"> @import 'src/assets/css/materialize.css'; </style>
  
  – Tony Tom
  Mar 28 at 4:36
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I get the following error: "Cannot find module './Namesearch.vue?vue&type=style&index=0&lang=scss&'"
  
  – Slins
  Mar 28 at 5:09
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That error has nothing to do with scss.
  
  – Ohgodwhy
  Mar 28 at 5:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  When I revert <style lang="scss"> to just <style> the error is fixed
  
  – Slins
  Mar 28 at 5:38
  

  
  
  
  

add a comment | 

1

I have a couple of CSS frameworks stored in the assets folder of my project, I previously had them in the static folder and everything was working fine. However, I decided to switch over some files from the static to the assets folder, and I'm having trouble linking the stylesheet.

Inside the assets folder, there's a folder called "css", in which I store all the frameworks.

My goal is to link the frameworks to the components that depend on them, in the components folder. Previously, as mentioned, the stylesheets were in the static folder and worked fine.

However, every attempt I have made so far results in the "/* style not found */" page. The images, which are in the assets folder as well, inside a folder called "img", work fine.

I have attempted using the following links for the css:

"~/assets/css/materialize.css"

"~assets/css/materialize.css"

"@/assets/css/materialize.css"

"@assets/css/materialize.css"

"assets/css/materialize.css"

"/assets/css/materialize.css"

"css/materialize.css" (That's what I used to link when using the static folder)

Every attempt resulted in the same "/* style not found */" page, by following the link in the source code.

Here's the component's head:

head: 
 link:[ 
 
 rel:'stylesheet',
 type:'text/css',
 href:'~assets/css/materialize.css'
 
 ]

javascript css css3 vue.js nuxt.js

share|improve this question

edited Mar 28 at 4:09

Udhav Sarvaiya

3,1811010 gold badges2121 silver badges3333 bronze badges

asked Mar 28 at 3:41

SlinsSlins

2344 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  try this way <style lang="scss"> @import 'src/assets/css/materialize.css'; </style>
  
  – Tony Tom
  Mar 28 at 4:36
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I get the following error: "Cannot find module './Namesearch.vue?vue&type=style&index=0&lang=scss&'"
  
  – Slins
  Mar 28 at 5:09
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That error has nothing to do with scss.
  
  – Ohgodwhy
  Mar 28 at 5:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  When I revert <style lang="scss"> to just <style> the error is fixed
  
  – Slins
  Mar 28 at 5:38
  

  
  
  
  

add a comment | 

I have a couple of CSS frameworks stored in the assets folder of my project, I previously had them in the static folder and everything was working fine. However, I decided to switch over some files from the static to the assets folder, and I'm having trouble linking the stylesheet.

Inside the assets folder, there's a folder called "css", in which I store all the frameworks.

My goal is to link the frameworks to the components that depend on them, in the components folder. Previously, as mentioned, the stylesheets were in the static folder and worked fine.

However, every attempt I have made so far results in the "/* style not found */" page. The images, which are in the assets folder as well, inside a folder called "img", work fine.

I have attempted using the following links for the css:

"~/assets/css/materialize.css"

"~assets/css/materialize.css"

"@/assets/css/materialize.css"

"@assets/css/materialize.css"

"assets/css/materialize.css"

"/assets/css/materialize.css"

"css/materialize.css" (That's what I used to link when using the static folder)

Every attempt resulted in the same "/* style not found */" page, by following the link in the source code.

Here's the component's head:

head: 
 link:[ 
 
 rel:'stylesheet',
 type:'text/css',
 href:'~assets/css/materialize.css'
 
 ]

javascript css css3 vue.js nuxt.js

share|improve this question

edited Mar 28 at 4:09

Udhav Sarvaiya

3,1811010 gold badges2121 silver badges3333 bronze badges

asked Mar 28 at 3:41

SlinsSlins

2344 bronze badges

head: 
 link:[ 
 
 rel:'stylesheet',
 type:'text/css',
 href:'~assets/css/materialize.css'
 
 ]

share|improve this question

edited Mar 28 at 4:09

Udhav Sarvaiya

3,1811010 gold badges2121 silver badges3333 bronze badges

asked Mar 28 at 3:41

SlinsSlins

2344 bronze badges

share|improve this question

edited Mar 28 at 4:09

Udhav Sarvaiya

3,1811010 gold badges2121 silver badges3333 bronze badges

asked Mar 28 at 3:41

SlinsSlins

2344 bronze badges

edited Mar 28 at 4:09

Udhav Sarvaiya

3,1811010 gold badges2121 silver badges3333 bronze badges

edited Mar 28 at 4:09

Udhav Sarvaiya

3,1811010 gold badges2121 silver badges3333 bronze badges

asked Mar 28 at 3:41

SlinsSlins

2344 bronze badges

asked Mar 28 at 3:41

SlinsSlins

2344 bronze badges

1 Answer
1

active

oldest

votes

2

In head you should reference only static resources, e.g. external ones or the ones that in the static folder. Assets folder isnt served by nuxt as static resource. Resource from it supposed to be imported. e.g. inside your components

import "~/assets/css/materialize.css"

Or inside style via postcss import

 <style>
 @import '~assets/css/materialize.css'
 </style>

Or globally via css property in nuxt config

export default 
 css: [
 '~/assets/css/materialize.css'
 ]

share|improve this answer

answered Mar 28 at 10:40

AldarundAldarund

9,55444 gold badges3636 silver badges6868 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I imported it through postcss and it works fine, thanks! I don't want to import it globally because it would be loaded on every page, which wouldn't be necessary
  
  – Slins
  Mar 28 at 11:04
  
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55389831%2fhow-to-import-css-frameworks-in-vue-nuxt-js-locally%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

In head you should reference only static resources, e.g. external ones or the ones that in the static folder. Assets folder isnt served by nuxt as static resource. Resource from it supposed to be imported. e.g. inside your components

import "~/assets/css/materialize.css"

Or inside style via postcss import

 <style>
 @import '~assets/css/materialize.css'
 </style>

Or globally via css property in nuxt config

export default 
 css: [
 '~/assets/css/materialize.css'
 ]

share|improve this answer

answered Mar 28 at 10:40

AldarundAldarund

9,55444 gold badges3636 silver badges6868 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I imported it through postcss and it works fine, thanks! I don't want to import it globally because it would be loaded on every page, which wouldn't be necessary
  
  – Slins
  Mar 28 at 11:04
  
  

  
  
  
  

add a comment | 

2

In head you should reference only static resources, e.g. external ones or the ones that in the static folder. Assets folder isnt served by nuxt as static resource. Resource from it supposed to be imported. e.g. inside your components

import "~/assets/css/materialize.css"

Or inside style via postcss import

 <style>
 @import '~assets/css/materialize.css'
 </style>

Or globally via css property in nuxt config

export default 
 css: [
 '~/assets/css/materialize.css'
 ]

share|improve this answer

answered Mar 28 at 10:40

AldarundAldarund

9,55444 gold badges3636 silver badges6868 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I imported it through postcss and it works fine, thanks! I don't want to import it globally because it would be loaded on every page, which wouldn't be necessary
  
  – Slins
  Mar 28 at 11:04
  
  

  
  
  
  

add a comment | 

In head you should reference only static resources, e.g. external ones or the ones that in the static folder. Assets folder isnt served by nuxt as static resource. Resource from it supposed to be imported. e.g. inside your components

import "~/assets/css/materialize.css"

Or inside style via postcss import

 <style>
 @import '~assets/css/materialize.css'
 </style>

Or globally via css property in nuxt config

export default 
 css: [
 '~/assets/css/materialize.css'
 ]

share|improve this answer

answered Mar 28 at 10:40

AldarundAldarund

9,55444 gold badges3636 silver badges6868 bronze badges

import "~/assets/css/materialize.css"

 <style>
 @import '~assets/css/materialize.css'
 </style>

export default 
 css: [
 '~/assets/css/materialize.css'
 ]

share|improve this answer

answered Mar 28 at 10:40

AldarundAldarund

9,55444 gold badges3636 silver badges6868 bronze badges

answered Mar 28 at 10:40

AldarundAldarund

9,55444 gold badges3636 silver badges6868 bronze badges

answered Mar 28 at 10:40

AldarundAldarund

9,55444 gold badges3636 silver badges6868 bronze badges