How to integrate external css frameworks?

[egoist]

How to integrate external css frameworks?

[egoist]

Simply add it in .vue file would work?

<style src="bulma/css/bulma.css"></style>

[egoist]

Something like this seems to work:

<style lang="sass">
  $blue: #72d0eb;
  @import "~bulma";
</style>

[egoist]

@Sheetaldx the issue tracker is actually for Poi only, you may ask that on StackOverflow instead.

[codeofsumit]

ohh works like a charm. Thank you!

[codeofsumit]

I'm sorry I have a follow-up question regarding sass. It seems like, contrary to my opening comment, sass-files only get loaded as standard css, without being compiled.
I think .scss and .sass files aren't compiled right now. Normally I'd use a webpack loader of course. How would I do this here?

[egoist]

yeah, vbuild does not have built-in sass support, but you can custom this by:

// vue.config.js
module.exports = {
  mergeConfig: {},
  // or
  production: {
    mergeConfig: {
      // webpack config
    }
  },
  development: {
    mergeConfig: {
      // webpack config
    }
  }
}

[codeofsumit]

I'm still struggling to make this work.

This is my vue.config.js:

module.exports = {
  title: 'my-app',
  resolve: true,
  mergeConfig: {
    // following options will be merged
    module: {
      loaders: [
        {
          test: /\.scss$/,
          loaders: ["sass"]
        }
      ]
    }
  }
}

installed the loader via:

npm install sass-loader node-sass --save-dev

my package.json (I had to put in webpack due to peerDependency of sass-loader on npm3

{
  "private": true,
  "name": "my-app",
  "scripts": {
    "dev": "vbuild --dev",
    "build": "vbuild"
  },
  "dependencies": {
    "bulma": "^0.2.3",
    "vue": "^2.0.0"
  },
  "devDependencies": {
    "node-sass": "^3.11.2",
    "sass-loader": "^4.0.2",
    "webpack": "^2.1.0-beta"
  }
}

and a simple test
app.scss

$blue: blue;

html {
  color: $blue;
}

loaded into the default App.vue

<style src="../styles/app.scss"></style>

And the variable is not resolved.
What am I missing?

[egoist]

eh, if you use sass directly in .vue file, simply install the loader and:

<style lang="sass" src="./path/to/xxx.scss"></style>

[codeofsumit]

I would, but then I get trouble with external scss/sass resourced e.g. bulma:

neither this

<style lang="sass">
  $blue: #00AFF8;
  $primary: $blue;
</style>
<style src="bulma/bulma.sass"></style>

nor this

<style lang="sass">
  $blue: #00AFF8;
  $primary: $blue;

  @import 'bulma/bulma.sass';
</style>

works (Build fails).

[codeofsumit]

ok that does work 🙌.
And just saw your edit above 🎉.

Now everything seems to be working beautifully.

I now do this:

<style lang="sass" src="../styles/app.scss"></style>

and inside app.scss:

$blue: #00AFF8;
$primary: $blue;

@import "~bulma";

html, body, .app {
  height: 100%;
  width: 100%;
}

// ... rest of my scss/css

Thanks for the quick support!

[Sheetaldx]

Hello

I am very new to framework+vue i am trying to embed external css i am adding

<style lang="css" src="../static/Democss.scss"></style> in main.vue but there is compilation error

Error: Error happened when webpack build: Error: Command failed: "/home/sheetal/DemoApp/node_modules/.bin/webpack"
please help how to call css in framewrok+v7

[egoist]

@Sheetaldx hmm you should set it to lang="scss" if you want to import scss file

[Sheetaldx]

I am importing css file not .scss i mention wrong extension in above comment

[egoist]

@Sheetaldx mind providing a repo or more details about the error?

[Sheetaldx]

the error is
Before deploy hook started...
Checking is node modules installed...
Node modules already installed.
Starting webpack build...
Error happened when webpack build: Error: Command failed: "/home/sheetal/DemoApp/node_modules/.bin/webpack"

Webpack build completed to www folder successfully!
Error happened on main chain:
Error: Error happened when webpack build: Error: Command failed: "/home/sheetal/DemoApp/node_modules/.bin/webpack"

at exec (/home/sheetal/DemoApp/hooks/hookers.js:187:19)
at ChildProcess.exithandler (child_process.js:277:5)
at emitTwo (events.js:125:13)
at ChildProcess.emit (events.js:213:7)
at maybeClose (internal/child_process.js:927:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)

Error: Error happened when webpack build: Error: Command failed: "/home/sheetal/DemoApp/node_modules/.bin/webpack"

[egoist]

@Sheetaldx hmm what is this? is it even a Poi thing?

[Sheetaldx]

no its not Poi..., i am using framework7+vue

[Sheetaldx]

i am just trying to import a external css file

[Sheetaldx]

ok thank u :)