Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mixins not available when "mixins: true" specified #9

Closed
jeffreywescott opened this issue Dec 31, 2015 · 8 comments
Closed

mixins not available when "mixins: true" specified #9

jeffreywescott opened this issue Dec 31, 2015 · 8 comments
Labels

Comments

@jeffreywescott
Copy link

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
Copy link
Member

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

Thanks for the support!

@jeffreywescott
Copy link
Author

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?

@justin808
Copy link
Member

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
Copy link
Member

@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
Copy link
Author

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";

@justin808
Copy link
Member

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

Phyks added a commit to Phyks/bootstrap-loader that referenced this issue Jul 31, 2016
Add some doc about using variables and mixins from Bootstrap, as discussed [here](shakacode#113) and [here](shakacode#9 (comment)).
@Phyks Phyks mentioned this issue Jul 31, 2016
justin808 pushed a commit that referenced this issue Aug 1, 2016
Add some doc about using variables and mixins from Bootstrap, as discussed [here](#113) and [here](#9 (comment)).
justin808 pushed a commit that referenced this issue Aug 1, 2016
Add some doc about using variables and mixins from Bootstrap, as discussed [here](#113) and [here](#9 (comment)).
justin808 pushed a commit that referenced this issue Aug 4, 2016
Add some doc about using variables and mixins from Bootstrap, as discussed [here](#113) and [here](#9 (comment)).
justin808 pushed a commit that referenced this issue Aug 31, 2016
Add some doc about using variables and mixins from Bootstrap, as discussed [here](#113) and [here](#9 (comment)).
@wzup
Copy link

wzup commented Nov 22, 2016

@justin808
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants