How to integrate external css frameworks?

[codeofsumit]

Hi there,
thanks for this awesome starting point to create vue apps. I'm trying it out right now and so far I love it.

I was just trying to use bulma. Although I can include scss files, @importing the framework drops this error

ERROR in /Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/css-loader?sourceMap!./src/assets/styles/app.scss
Module not found: Error: Can't resolve './bulma' in '/Users/sumitkumar/Projects/car2go-autobook/src/assets/styles'
 @ /Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/css-loader?sourceMap!./src/assets/styles/app.scss 3:10-140
 @ /Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/css-loader?sourceMap!/Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/vue-loader/lib/style-rewriter.js?id=data-v-739eacbf!/Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/App.vue
 @ /Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/vue-style-loader!/Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/css-loader?sourceMap!/Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/vue-loader/lib/style-rewriter.js?id=data-v-739eacbf!/Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/App.vue
 @ ./src/components/App.vue
 @ ./src/app.js
 @ ./src/index.js
 @ multi client

I couldn't find a clear documentation of how to properly include css/scss frameworks or even my own files as there are no example files included (just the CSS in the vue component).

Any help on how you intended to do this is much appreciated.

[egoist]

Simply add it in .vue file would work?

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

[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).

[egoist]

Something like this seems to work:

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

[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

[egoist]

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

[Sheetaldx]

ok thank u :)