Variables from the config and from bulma are not available in the css modules

[r0st1kuzh]

Can you help me to figure out how to make it work?

[stipsan]

Hey, sure! Could you share your webpack config here?

[r0st1kuzh]

Hey, thanks for the feedback! I actually can setup bulma variables through theme param, but when I try to use some bulma variables inside of my module I am getting error that they are not defined. Is it possible to use them?

var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var config = {
  context: __dirname + "/app",
  entry: {
    javascript: "./app.js",
    html: "./index.html"
  },
  output: {
    filename: "girl-admin-bundle.js",
    path: __dirname + "/../public/admin",
    publicPath: "/admin"
  },
  module: {
    loaders: [
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      },
      {
        test: /(\.jsx|\.js)$/,
        exclude: /node_modules/,
        loaders: ['react-hot', "babel-loader"],
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      },
      {
        test: /\.scss$/,
        include: /sass/,
        loader: ExtractTextPlugin.extract("style", "css?modules&importLoaders=2!sass?sourceMap&outputStyle=expanded!bulma?theme=app/sass/config.sass")
      },
    ],
    postcss: [autoprefixer({browsers: ['last 2 versions']})]
  },
  bulmaLoader: {
    theme: 'app/sass/config.sass'
  },
  plugins: [
    new ExtractTextPlugin('bundle.css'),
  ]
}

if (process.env.NODE_ENV === 'dev') {
  config.devtool = 'source-map'
  config.debug = true
}

module.exports = config

[stipsan]

Ah ok I see what you mean.

TL;DR you'll have to import your config.sass file manually where you need to reuse these variables. In one of my own projects that is using bulma-loader I've run into the same exact problem as you so I'll update this plugin to give you an easy way of reusing them.

Basically, what bulma-loader does behind the scenes is this:
It will check if the file being imported is located somewhere in this folder: ./node_modules/bulma/sass.
If it does, it will prepend the contents of your config.sass file directly in the bulma file you're importing.
If the file is from your local project, or another npm package, the variables will not be inlined.
This is why you get an error when you try to use the variables in your own code.

The reason why it's done like that today is to avoid causing conflicts or breaking your sass.
For instance, some users may have separate files for their variables. One for bulma, one for their own project. If we inlined the variables everywhere then their sass codebase would break.

Until bulma-loader gives you an easy way of doing this, you'll have to import the config file manually in your own code.

Lets pretend you're doing something like this in your code, in a file located here: app/sass/buttons.sass
(using SCSS syntax in the examples as I'm not experienced in SASS syntax)

.login-button {
  composes: button primary from 'bulma';

  .icon {
    background-color: $primary-invert;
    color: $primary;
  }
}

Change it to the following to make it work:

@import "config";

.login-button {
  composes: button primary from 'bulma';

  .icon {
    background-color: $primary-invert;
    color: $primary;
  }
}

Let me know if that works out for you! 😄

[r0st1kuzh]

Ok, got that. Thank you. That is exactly what I was thinking about. I see the great potential in bulma and I like the principles how it is built much more than any other solutions.

Wanted also to ask you few questions about practices using such approach that is described in the instructions:

1. How do you handle such kind of situation - given we have a nested structure of bulma classes and we want to use it
   `

Hero title

Hero subtitle

` - You create separate internal class where you compose from bulma ? or - You just use bulma classes directly in the JSX in such case?

2. is there any way to use compose if you write SASS? I just can't find any mentions about that in the Internet. I love SASS because it is more elegant but composes feature is really awesome!

[r0st1kuzh]

@stipsan And how do you access breakpoints from bulma?

[stipsan]

No worries, I agree the outlook of Bulma is looking really good. The only cases I'm not using it is where I have to support browsers that don't support flexbox layouts.

Nested structures

You don't need to worry about it, check out the example here, that's nested: https://github.com/stipsan/bulma-loader#importing-customized-bulma-css
If you use bulma classes directly in the JSX then you're not using the CSS module aspect of it. If that works better for you, I recommend using this module: https://github.com/itsmepetrov/classnames-loader
You should be able to set it up like this:

// in webpack.config.js
{
  test: /\bulma.sass$/,
  loaders: ['classnames', ExtractTextPlugin.extract('style', 'sass')])
}
// react component
import bulma from 'bulma/sass/bulma.sass'

export const Welcome = () => <div className={bulma('hero')}>
  <div className={bulma('hero-content')}>
    <h1 className={bulma('title')}>Welcome!</h1>
    <h2 className={bulma('subtitle')}>Long time no see :-)</h2>
  </div>
</div>

That's on top of my head, so you may need to tweak it for it to work.

Combining SASS and CSS modules

Yes there is, and yeah there's very little information on it. I had to dig deep to figure out how it works.

Given this example:

.tabs {
  composes: tabs from 'bulma';
}

this is what is called an external reference in the CSS modules spec. webpack will resolve it using the path lookup it uses in general. In this particular case it will resolve from 'bulma' to from './node_modules/bulma/sass/bulma.sass'.
The webpack config in this case looks like this:

loaders: ["style", "css?modules&importLoaders=1", "sass"]

That last statement in the loaders array, sass, you may be familiar with. That's the regular import. The imports done in the composes keyword is controlled by the &importLoaders statement.

For instance, this would fail:

loaders: ["style", "css?modules&importLoaders=1", "autoprefixer", "sass"]

Because only 1 loader is imported, and in this case it's autoprefixer.

You can find more information about it here and here.

Accessing breakpoints

I know about two ways you can do that:

1. composing these classes to show/hide stuff: http://bulma.io/documentation/modifiers/responsive-helpers/
2. import this file and use the mixins directly: https://github.com/jgthms/bulma/blob/master/sass/utilities/mixins.sass (the mixin breakpoints variables is in here: https://github.com/jgthms/bulma/blob/master/sass/utilities/variables.sass)

Hope that helps 😄

[r0st1kuzh]

@stipsan Great explanation! Really appreciate!

[stipsan]

@r0st1kuzh you're welcome!

[r0st1kuzh]

@stipsan and what is the right webpack config to make icon fonts from bulma to work in context of css modules?

[stipsan]

bulma is just using fontawesome.

If you install this: https://www.npmjs.com/package/font-awesome

Assuming you got this setup to load the font files:

      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader'
      }

You should be able to do this:

.icon {
  composes: icon from 'bulma';
}
.fa-github {
  composes: fa fa-github from 'font-awesome';
}

Using this in your react render:

<span className={cx('icon')}>
  <i className={cx('fa-home')} />
</span>

[r0st1kuzh]

Thanks a lot! That works!

[stipsan]

Awesome!