shakacode/bootstrap-loader

mixins not available when "mixins: true" specified

jeffreywescott opened this issue · 8 comments

jeffreywescott commented

Hey -- awesome library. Thanks for it!

I'm trying to use mixins using your css-modules example, changing app/Layout/Layout.scss as follows:

.layout {
  display: block;
  position: relative;
  width: 100%;
  @include make-container();
}

In the .bootstraprc:

styles:
  mixins: true
  ...

However, when I try to run webpack (or the dev server), I get:

ERROR in ./~/css-loader?modules&importLoaders=2&localIdentName=[name]__[local]__[hash:base64:5]!./~/postcss-loader!./~/sass-loader!./app/layout/Layout.scss
Module build failed:
  @include make-container();
          ^
      No mixin named make-container

Backtrace:
    stdin:5
      in /Users/jeffrey/dev/learnersguild/bootstrap-loader/examples/css-modules/app/layout/Layout.scss (line 5, column 12)
 @ ./app/layout/Layout.scss 4:14-240 13:2-17:4 14:20-246

Any ideas?

justin808 commented

@jeffreywescott you need to use the https://github.com/shakacode/sass-resources-loader.

Thanks for the support!

jeffreywescott commented

Hi, @justin808 -- thanks for the tip!

So, how would I use that to get access to all of the bootstrap mixins, variables, etc.? Is there an example somewhere that I can look at?

  • 👍1
justin808 commented

https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client%2Fwebpack.client.base.config.js#L86

  // Place here all postCSS plugins here, so postcss-loader will apply them
  postcss: [autoprefixer],

  // Place here all SASS files with variables, mixins etc.
  // And sass-resources-loader will load them in every CSS Module (SASS file) for you
  // (so don't need to @import them explicitly)
  // https://github.com/shakacode/sass-resources-loader
  sassResources: ['./app/assets/styles/app-variables.scss'],

(not sure about the auto-prefixer part, @alexfedoseev?)

alex35mil commented

@jeffreywescott @justin808

postcss: [autoprefixer], is not related to sass-resources-loader. To make bootstrap mixins & variables available in CSS Modules you can:

— provide path to them in sassResources array:

/* webpack.config.js */

sassResources: [
  './node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss',
  './node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_mixins.scss',
],

— or create SASS file and import them there:

/* my-sass-resources.scss */

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables";
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_mixins";

$shared-var: 10px;

@mixin my-padding {
  // you can also use bootstrap staff here
  padding: $shared-var;
}
/* webpack.config.js */

sassResources: './my-sass-resources.scss',
jeffreywescott commented

Thanks, guys!

Here's what I ended up doing (for anyone else who stumbles onto this issue):

snippet from webpack.config.js

module.exports = {

  // stuff removed for clarity ...

  module: {
    loaders: [
      // stuff removed for clarity ...
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          'style',
          'css?modules&importLoaders=2&localIdentName=[name]__[local]__[hash:base64:5]' +
          '!sass' +
          '!sass-resources'
        ),
      },
      // stuff removed for clarity ...
    ],
  },

  // stuff removed for clarity ...

  sassResources: './config/sass-resources.scss',
}

config/sass-resources.scss

// Make variables and mixins available when using CSS modules.
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
  • 👍11
  • 🎉3
justin808 commented

@jeffreywescott Send me an email if you'd like to join our slack group. Thanks for your feedback!

  • 👍1
justin808 commented

@wzup The sass-resources-loader is designed for setting sass variables when used with css-modules.