Styjun

Who buys a weak currency?

Why different specifications for telescopes and binoculars?

Is this Cambridge Dictionary example of "felicitate" valid?

Run Bash scripts in folder all at the same time

How do I explain that I don't want to maintain old projects?

Is it stylistically sound to use onomatopoeic words?

Did the Ottoman empire suppress the printing press?

Do injective, yet not bijective, functions have an inverse?

Reference request: quantifier elimination test

Performance issue in code for reading line and testing for palindrome

How do you move up one folder in Finder?

Adjust the Table

Appropriate conduit for several data cables underground over 300' run

What is the meaning of “Can I have a slice?” In NYC?

What could cause the sea level to massively decrease?

Why is the Cauchy Distribution is so useful?

Writing an ace/aro character?

Can Jimmy hang on his rope?

Would a carnivorous diet be able to support a giant worm?

Is it better in terms of durability to remove card+battery or to connect to charger/computer via USB-C?

First Entry Member State schengen visa

Party going through airport security at separate times?

Category-theoretic treatment of diffs, patches and merging?

Would a Nikon FG 20 film SLR camera take pictures without batteries?

How to setup SASS in VueJS project (vue-cli, no webpack config)

Angular CLI SASS optionsHow can I get valid css from sass-loader with current webpack configuration?Webpack autoprefix not working with suggested configurationSass within Vue file not compilingVue js and scss or SassWebpack scss & css modules react - unexpected token stringVueJS/Webpack - Not exporting sass file to css fileUse custom SCSS with Bootstrap-Vue + Webpack + Vue.jsVueJS + WebpackSimple not compiling SASSAngular 6 SSR Sass minification with Webpack

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

0

My Repo: https://github.com/leongaban/VueJS-RobotBuilder

The course I'm following: https://app.pluralsight.com/player?course=vuejs-fundamentals&author=jim-cooper

This is after I already set it up. Did not remember if there was a sass option.

Anyways currently running into this error:

Invalid CSS after "<": expected 1 selector or at-rule, was ""

I replaced my old <style> CSS stuff here </style>

With:

<style lang="scss">
 @import "_robotBuilder.scss";
</style>

I also installed the following packages, but I don't see a webpack config file I can edit.

"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",

css sass vuejs2

share|improve this question

edited Mar 25 at 23:30

Leon Gaban

asked Mar 25 at 23:19

Leon GabanLeon Gaban

10.8k4747 gold badges196196 silver badges372372 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Are you using the VueCLI v3 to create the project? Also are you trying to write your CSS inside the style tags in the template or simply link to one scss file that includes everything?
  
  – Bryce Howitson
  Mar 25 at 23:34
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @BryceHowitson I used the CLI, thus I have no webpack config file.. there is a postcss.config.js file in this project however.
  
  – Leon Gaban
  Mar 25 at 23:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yeah, that part is confusing. If you need a webpack config you can create (or find the already created) vue.config.js All the webpack config is supposed to go in there. Use VueCLI3 as part of your Google searches to get better results. When I switched to the new VueCLI this post really helped me
  
  – Bryce Howitson
  Mar 25 at 23:44
  

  
  
  
  

add a comment | 

0

My Repo: https://github.com/leongaban/VueJS-RobotBuilder

The course I'm following: https://app.pluralsight.com/player?course=vuejs-fundamentals&author=jim-cooper

This is after I already set it up. Did not remember if there was a sass option.

Anyways currently running into this error:

Invalid CSS after "<": expected 1 selector or at-rule, was ""

I replaced my old <style> CSS stuff here </style>

With:

<style lang="scss">
 @import "_robotBuilder.scss";
</style>

I also installed the following packages, but I don't see a webpack config file I can edit.

"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",

css sass vuejs2

share|improve this question

edited Mar 25 at 23:30

Leon Gaban

asked Mar 25 at 23:19

Leon GabanLeon Gaban

10.8k4747 gold badges196196 silver badges372372 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Are you using the VueCLI v3 to create the project? Also are you trying to write your CSS inside the style tags in the template or simply link to one scss file that includes everything?
  
  – Bryce Howitson
  Mar 25 at 23:34
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @BryceHowitson I used the CLI, thus I have no webpack config file.. there is a postcss.config.js file in this project however.
  
  – Leon Gaban
  Mar 25 at 23:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yeah, that part is confusing. If you need a webpack config you can create (or find the already created) vue.config.js All the webpack config is supposed to go in there. Use VueCLI3 as part of your Google searches to get better results. When I switched to the new VueCLI this post really helped me
  
  – Bryce Howitson
  Mar 25 at 23:44
  

  
  
  
  

add a comment | 

My Repo: https://github.com/leongaban/VueJS-RobotBuilder

The course I'm following: https://app.pluralsight.com/player?course=vuejs-fundamentals&author=jim-cooper

This is after I already set it up. Did not remember if there was a sass option.

Anyways currently running into this error:

Invalid CSS after "<": expected 1 selector or at-rule, was ""

I replaced my old <style> CSS stuff here </style>

With:

<style lang="scss">
 @import "_robotBuilder.scss";
</style>

I also installed the following packages, but I don't see a webpack config file I can edit.

"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",

css sass vuejs2

share|improve this question

edited Mar 25 at 23:30

Leon Gaban

asked Mar 25 at 23:19

Leon GabanLeon Gaban

10.8k4747 gold badges196196 silver badges372372 bronze badges

<style lang="scss">
 @import "_robotBuilder.scss";
</style>

"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",

share|improve this question

edited Mar 25 at 23:30

Leon Gaban

asked Mar 25 at 23:19

Leon GabanLeon Gaban

10.8k4747 gold badges196196 silver badges372372 bronze badges

share|improve this question

edited Mar 25 at 23:30

Leon Gaban

asked Mar 25 at 23:19

Leon GabanLeon Gaban

10.8k4747 gold badges196196 silver badges372372 bronze badges

asked Mar 25 at 23:19

Leon GabanLeon Gaban

10.8k4747 gold badges196196 silver badges372372 bronze badges

asked Mar 25 at 23:19

Leon GabanLeon Gaban

10.8k4747 gold badges196196 silver badges372372 bronze badges

2 Answers
2

active

oldest

votes

1

My app.vue (main container) has only this in the style tags

<style lang="scss">
 @import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&subset=latin-ext');
 @import "@/scss/style.scss";
</style>

and works just fine.

And this in the vue.config.js

const path = require("path");
module.exports = 

 baseUrl: '/',
 outputDir: undefined,
 assetsDir: 'assets',
 runtimeCompiler: undefined,
 productionSourceMap: undefined,
 parallel: true,
 css: 
 modules: false,
 loaderOptions: 
 

Turning off the CSS Modularization "might" have something to do with making it work with the imports...

share|improve this answer

answered Mar 25 at 23:50

Bryce HowitsonBryce Howitson

2,23677 silver badges1818 bronze badges

add a comment | 

2

Just fixed my problem.

I removed this:

<style lang="scss">
 @import "_robotBuilder.scss";
</style>

Thought it was strange that an import would exist inside a style tag anyways.

Then I cleaned up the .scss file and then just used this import statement inside of the <script> section.

import './_robotBuilder.scss';

Update

Just learned you can scope the <style scoped> tag so styles only apply to the component.

share|improve this answer

edited Mar 26 at 16:23

answered Mar 25 at 23:43

Leon GabanLeon Gaban

10.8k4747 gold badges196196 silver badges372372 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I think what you had would have worked, but the error was likely that it couldn't find the file NOT the error you got
  
  – Bryce Howitson
  Mar 25 at 23:45
  

  
  
  
  

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%2f55347769%2fhow-to-setup-sass-in-vuejs-project-vue-cli-no-webpack-config%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

My app.vue (main container) has only this in the style tags

<style lang="scss">
 @import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&subset=latin-ext');
 @import "@/scss/style.scss";
</style>

and works just fine.

And this in the vue.config.js

const path = require("path");
module.exports = 

 baseUrl: '/',
 outputDir: undefined,
 assetsDir: 'assets',
 runtimeCompiler: undefined,
 productionSourceMap: undefined,
 parallel: true,
 css: 
 modules: false,
 loaderOptions: 
 

Turning off the CSS Modularization "might" have something to do with making it work with the imports...

share|improve this answer

answered Mar 25 at 23:50

Bryce HowitsonBryce Howitson

2,23677 silver badges1818 bronze badges

add a comment | 

1

My app.vue (main container) has only this in the style tags

<style lang="scss">
 @import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&subset=latin-ext');
 @import "@/scss/style.scss";
</style>

and works just fine.

And this in the vue.config.js

const path = require("path");
module.exports = 

 baseUrl: '/',
 outputDir: undefined,
 assetsDir: 'assets',
 runtimeCompiler: undefined,
 productionSourceMap: undefined,
 parallel: true,
 css: 
 modules: false,
 loaderOptions: 
 

Turning off the CSS Modularization "might" have something to do with making it work with the imports...

share|improve this answer

answered Mar 25 at 23:50

Bryce HowitsonBryce Howitson

2,23677 silver badges1818 bronze badges

add a comment | 

My app.vue (main container) has only this in the style tags

<style lang="scss">
 @import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&subset=latin-ext');
 @import "@/scss/style.scss";
</style>

and works just fine.

And this in the vue.config.js

const path = require("path");
module.exports = 

 baseUrl: '/',
 outputDir: undefined,
 assetsDir: 'assets',
 runtimeCompiler: undefined,
 productionSourceMap: undefined,
 parallel: true,
 css: 
 modules: false,
 loaderOptions: 
 

Turning off the CSS Modularization "might" have something to do with making it work with the imports...

share|improve this answer

answered Mar 25 at 23:50

Bryce HowitsonBryce Howitson

2,23677 silver badges1818 bronze badges

<style lang="scss">
 @import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&subset=latin-ext');
 @import "@/scss/style.scss";
</style>

const path = require("path");
module.exports = 

 baseUrl: '/',
 outputDir: undefined,
 assetsDir: 'assets',
 runtimeCompiler: undefined,
 productionSourceMap: undefined,
 parallel: true,
 css: 
 modules: false,
 loaderOptions: 
 

share|improve this answer

answered Mar 25 at 23:50

Bryce HowitsonBryce Howitson

2,23677 silver badges1818 bronze badges

answered Mar 25 at 23:50

Bryce HowitsonBryce Howitson

2,23677 silver badges1818 bronze badges

answered Mar 25 at 23:50

Bryce HowitsonBryce Howitson

2,23677 silver badges1818 bronze badges

2

Just fixed my problem.

I removed this:

<style lang="scss">
 @import "_robotBuilder.scss";
</style>

Thought it was strange that an import would exist inside a style tag anyways.

Then I cleaned up the .scss file and then just used this import statement inside of the <script> section.

import './_robotBuilder.scss';

Update

Just learned you can scope the <style scoped> tag so styles only apply to the component.

share|improve this answer

edited Mar 26 at 16:23

answered Mar 25 at 23:43

Leon GabanLeon Gaban

10.8k4747 gold badges196196 silver badges372372 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I think what you had would have worked, but the error was likely that it couldn't find the file NOT the error you got
  
  – Bryce Howitson
  Mar 25 at 23:45
  

  
  
  
  

add a comment | 

2

Just fixed my problem.

I removed this:

<style lang="scss">
 @import "_robotBuilder.scss";
</style>

Thought it was strange that an import would exist inside a style tag anyways.

Then I cleaned up the .scss file and then just used this import statement inside of the <script> section.

import './_robotBuilder.scss';

Update

Just learned you can scope the <style scoped> tag so styles only apply to the component.

share|improve this answer

edited Mar 26 at 16:23

answered Mar 25 at 23:43

Leon GabanLeon Gaban

10.8k4747 gold badges196196 silver badges372372 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I think what you had would have worked, but the error was likely that it couldn't find the file NOT the error you got
  
  – Bryce Howitson
  Mar 25 at 23:45
  

  
  
  
  

add a comment | 

Just fixed my problem.

I removed this:

<style lang="scss">
 @import "_robotBuilder.scss";
</style>

Thought it was strange that an import would exist inside a style tag anyways.

Then I cleaned up the .scss file and then just used this import statement inside of the <script> section.

import './_robotBuilder.scss';

Update

Just learned you can scope the <style scoped> tag so styles only apply to the component.

share|improve this answer

edited Mar 26 at 16:23

answered Mar 25 at 23:43

Leon GabanLeon Gaban

10.8k4747 gold badges196196 silver badges372372 bronze badges

<style lang="scss">
 @import "_robotBuilder.scss";
</style>

share|improve this answer

edited Mar 26 at 16:23

answered Mar 25 at 23:43

Leon GabanLeon Gaban

10.8k4747 gold badges196196 silver badges372372 bronze badges

answered Mar 25 at 23:43

Leon GabanLeon Gaban

10.8k4747 gold badges196196 silver badges372372 bronze badges

answered Mar 25 at 23:43

Leon GabanLeon Gaban

10.8k4747 gold badges196196 silver badges372372 bronze badges