GithubHelp home page GithubHelp logo

bootstrap-sass-loader's Introduction

ShakaCode Website

This is the ShakaCode Website, http://www.shakacode.com

Starting Locally

scripts/shakacode-local

Deploying

scripts/shakacode-deploy

Creating a page or post

See the octopress readme.

  1. octopress new post "The React on Rails Doctrine"

Dependencies to build

  1. Bower: npm install -g bower
  2. Gem Octopress: gem install octopress

Run Locally

  1. git clone [email protected]:shakacode/shakacode-website.git
  2. cd shakacode-website
  3. bundle
  4. bower install
  5. scripts/shakacode-local
  6. go to localhost:4000

Online and Local Documentation

Octopress Docs and Jekyll Docs

Local Octopress Documentation

You can run the local Octopress Documentation

  1. go to shakacode-website folder
  2. run octopress docs
  3. go to localhost:4444

CSS

It's a simple BEM style like this

JS

The octopress-asset-pipeline gem takes care of javascript. It combine, compress and fingerprint CSS and JS (and/or Coffescript). You can define precedence on _config.yml like this:

  asset_pipeline:
    order_js:
    - jquery.js
    - main.js

Team Members Data

All user info is inside _config.yml, feel free to change your info. If you're playing around on localhost, restart it. You need to restart the server everytime you make some change on _config.yml. If you add someone, do it alphabetically.

How to create posts

  1. Run the project locally
  2. go to the project folder
  3. run octopress new post "<post name>". A post will be created prepended by time, for example: octopress new post "My new Post" will create a file 2015-09-21-my-new-post.markdown
  4. Please use a branch and PR for new posts!

Test Locally

scripts/shakacode-local

How to deploy

After you create your post/page or modify something you need to deploy

scripts/shakacode-deploy

How to unpublish

  1. Run the project locally
  2. go to the project folder
  3. run octopress unpublish "<post name>"

For more info:

jekyll --help
octopress --help
octopress new --help

Live Reload

  1. Add Chrome Extension. Here's the Chrome Extension
  2. Start Jekyll by running: guard

For more details, see article Jekyll Live Reload

To be done

See Trello board ShakaCode Website and website issues page.

bootstrap-sass-loader's People

Contributors

azamat-sharapov avatar clayharris avatar fcaballero avatar jorrit avatar justin808 avatar matthisk avatar mgtitimoli avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bootstrap-sass-loader's Issues

Loading only bootstrap styles

Aloha!
Can anybody gime me a tip how to configure webpack to expose only bootstrap.css, because I don't use bootstrap scrips at all? Can't find solution yet

Shaaaka)

@import scss file hot reload

Thanks for a great loader!
I using customization with bootstrap-sass.config.js like that:

module.exports = {
  preBootstrapCustomizations: "./_pre-bootstrap-customizations.scss",
  bootstrapCustomizations: "./_bootstrap-customizations.scss",
  mainSass: "./main.scss",
  styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader!sass?outputStyle=expanded"),
  scripts: {
    ...
  },
  styles: {
    ...
  }
};

main.scss

//some css
@import "table";

table.scss

//table css

Then i modify main.scss webpack recompile and reload page. But then i change imported table.scss nothing happens. How to fix?

Make loaders for stylesheet configurable to support the ExtractTextPlugin

Gitter conversation 11/21/2014:
@sokra I'm trying to make my example https://github.com/justin808/bootstrap-sass-loader-example work with the https://github.com/webpack/extract-text-webpack-plugin

This creates the css.

  entry: [
    'bootstrap-sass!./bootstrap-sass.config.js'  // using customization file
  ],

I've got the css loader specified:

    loaders: [
      { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },

but that's not what I need. Do I need to integrate the ExtratractTextPlugin into the bootstrap-sass-loader? Or is there a way to chain the the loaders?

@justin808: The problem is you hardcoded the loaders that should be used for the stylesheet (to style!css!sass). You need to give the user the choice which loaders should be used. Maybe you offer an API like this one:

var bootstrapSass = require("bootstrap-sass");
entry: [
  bootstrapSass({
    scripts: { /* ... */ },
    styles: { /* ... */ },
    mainStyle: "./path-to-xyz.sass",
    styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
    // default to "style-loader!css-loader!sass-loader"
    // ...
  })
]

The bootstrap, style-loader, css-loader, and sass-loader should be peerDependencies.

Placeholder for Bootstrap 4.0

Right now, we only support Bootstrap 3.x.

This is issue is opened to track what's needed for Bootstrap 4.x support.

Error: Bootstrap's JavaScript requires jQuery

I've tried everything but the right thing. I'm early in the process of learning Webpack, and I am trying to get bootstrap-sass-loader working. I keep getting the following error when I execute npm run dev:

> webpack-dev-server --devtool eval --hot --progress --colors --content-base build

 70% 2/2 build moduleshttp://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /Users/josh/jibe/webpack/build
 30% 2/6 build modules
/Users/josh/jibe/webpack/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:206
                    throw e;
                          ^
Error: Bootstrap's JavaScript requires jQuery
    at Object.<anonymous> (/Users/josh/jibe/webpack/node_modules/bootstrap-sass/assets/javascripts/bootstrap.js:8:9)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at DependenciesBlock.loadPitch (/Users/josh/jibe/webpack/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:193:17)
    at DependenciesBlock.doBuild (/Users/josh/jibe/webpack/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:241:4)
    at DependenciesBlock.build (/Users/josh/jibe/webpack/node_modules/webpack/lib/NormalModule.js:67:14)

My webpack.config.js is as follows:

'use strict';

var webpack = require('webpack');
var config = {
  addVendor: function(name, path) {
    this.resolve.alias[name] = path;
    this.module.noParse.push(new RegExp(path));
  },
  entry: {
    app: ['./app/main.js',"bootstrap-sass!./bootstrap-sass.config.js",'webpack/hot/dev-server'],
    vendors: ['react']
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
  output: {
    path: './build',
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['','.js','.json','.jsx']
  },
  module: {
    noParse: ['react'],
    loaders: [
      { test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' },
      { test: /\.js$/, exclude: [/node_modules/],  loader: 'babel-loader' },
      { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded" }
    ]
  }
};

module.exports = config;

package.json

{
  "name": "jibe-ui",
  "version": "0.1.0",
  "main": "app/main.js",
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --hot --progress --colors --content-base build"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^5.2.16",
    "babel-loader": "^5.0.0",
    "extract-text-webpack-plugin": "^0.7.1",
    "react": "^0.13.2",
    "webpack": "^1.8.11",
    "webpack-dev-server": "^1.8.2"
  },
  "dependencies": {
    "bootstrap": "^3.3.4",
    "bootstrap-sass": "^3.3.4",
    "imports-loader": "^0.6.3",
    "jquery": "^2.1.4",
    "jsx-loader": "^0.13.2",
    "node-sass": "^2.1.1",
    "sass-loader": "^0.6.0",
    "style-loader": "^0.12.2"
  }
}

bootstrap-sass.config.js

module.exports = {
  verbose: true, // print out your custom files used
  debug: false, // print out the full generated scss file
  styleLoader: "style-loader!css-loader!sass-loader", // see example for the ExtractTextPlugin
  scripts: {
    // add every bootstrap script you need
    'transition': true
  },
  styles: {
    // add every bootstrap style you need
    "mixins": true,

    "normalize": true,
    "print": true,

    "scaffolding": true,
    "type": true,
  }
};

Was hoping you could shed some light on wtf it is I am doing wrong. Thanks a bunch.

Migration to bootstrap-loader

New Plan -- keep 2 repositories. Other one is https://github.com/shakacode/bootstrap-loader/

Major new features:

  • CSS Modules (indirectly)
  • Easy to not include jQuery
  • Support for Bootstrap v4

We're planning on keeping the same github repository, renamed to bootstrap-loader, and changing the npm module name to bootstrap-loader.

  • Issue one more version of npm bootstrap-sass-loader and deprecate
  • Have a changelog with migration steps
  • Ensure docs are sufficient.

CC: @alexfedoseev

How can I access bootstrap variables?

I want to access variables like $navbar-height in stylesheets.

Is there a way to import all the customized variables?

In the docs I noticed it says:

and your main Sass file that can depend on Bootstrap variables

This makes me think there is only one place I can depend on Bootstrap variables.

Weird relative path behaviour

I'm not sure if I totally misunderstand but the paths seem to be handled very strangely.

If I have a webpack entry in say

project/a/b/foo.js and this requires like:

`require("bootstrap-sass!../../bootstrap/bootstrap-sass.config.js");``

and then I have

project/bootstrap/main.scss
project/bootstrap/bootstrap-sass.config.js

with

mainSass: './main.scss',

it will try to look for main.scss relatative bootstrap-sass.config.js in:

../../main.scss which blows up. If I move main.scss down 2 folders to root it works.

So it seems it "inherits" prepended "../.." from the requiring call. It doesn't even help if I do it by an extra proxy oneliner module that I put in the same folder.

Is my example understandable? I could try to isolate a small example…

@import windows system path error

Hi,
I was testing this out on windows 8 with you example (https://github.com/justin808/bootstrap-sass-loader-example) which did not work, so I was debugging and I got that bootstrap-sass-styles.loader.js produce this:

@import "C:\usr\tech\bootstrap-sass-loader-example\_pre-bootstrap-customizations.scss";
@import "C:\usr\tech\bootstrap-sass-loader-example\node_modules\bootstrap-sass\assets\stylesheets\bootstrap\variables";
$icon-font-path: "node_modules\bootstrap-sass\assets\fonts\bootstrap\";
@import "C:\usr\tech\bootstrap-sass-loader-example\_bootstrap-customizations.scss";
.....
@import "C:\usr\tech\bootstrap-sass-loader-example\_main.scss";

as you can see, that separator "" is not supported in @import CSS at-rule, so when it's compiling I get the next error:

ERROR in ./~/css-loader!./~/sass-loader!./~/bootstrap-sass-loader/bootstrap-sass-styles.loader.js!./bootstrap-sass.config.js
Module build failed: 
module.exports = {
       ^
      File to import not found or unreadable: ./_C:usrtech♂ootstrap-sass-loader-example_pre-bootstrap-customizations.scss
      in C:\usr\tech\bootstrap-sass-loader-example\bootstrap-sass.config.js (line 1, column 9)
 @ ./~/style-loader!./~/css-loader!./~/sass-loader!./~/bootstrap-sass-loader/bootstrap-sass-styles.loader.js!./bootstrap-sass.config.js 4:14-375

You could solve this by returning (probably you could have a better idea):

return source.replace(/\\/g, '/');

Regards,
Fabián

Cannot find module error when Hot module replacement is enabled

I have been getting the following error lately when Hot module replacement is enabled:

ERROR in ./~/bootstrap-sass-loader/index.loader.js!./bootstrap-sass.config.js
Module build failed: Error: Cannot find module '/Users/newuser/w/idnyc/site/node_modules/react-hot-loader/index.js!/Users/newuser/w/idnyc/site/node_modules/jsx-loader/index.js?harmony!/Users/newuser/w/idnyc/site/bootstrap-sass.config.js'

Make mainSass optional

Thanks for the loader!

Could you make mainSass in config file optional? Because there are cases, where I use different preprocessor for main stylesheet, like Stylus or plain CSS.

Thanks

How to debug when HMR stops working?

The symptom I suddenly started experiencing is that the hot loader no longer picks up any changes I make to files referenced by bootstrap-sass.config.js (e.g. mainSass, bootstrapCustomizations, etc).

Suppose I have

mainSass: './app/assets/stylesheets/_main.sass'

Then when I save _main.sass, I see no updates in my webpack-dev-server log. The command I am using to run that is:

webpack-dev-server --config ./webpack-dev.config.js --hot --progress --colors --history-api-fallback --content-base build

I realize this isn't helpful at all as far as getting help identifying a specific problem, but I am more curious about what to check for when something like this stops working. So far, I have tried checking out at a previous point where I know for sure that the HMR was working, but when I go back in history and npm install at that checkout, it still doesn't work (weird, right?).

Other things I have checked/observed:

  • bootstrap-sass.config.js is definitely getting loaded, since I have the correct and latest styling upon the dev server startup.
  • I have not modified bootstrap-sass.config.js since the time it was working, so it's not a configuration issue
  • refreshing the browser page after a CSS change does nothing, but restarting webpack-dev-server works (presumably because it rebuilds everything from scratch)
  • It makes no difference whether I am on localhost:8080/ or localhost:8080/other/path - it still doesn't work (thus ruling out --history-api-fallback? It would be the only thing I can think of config-wise that I have changed recently?)

Basically, if you have any intuitions that come to mind, I would be very grateful to hear them. And thanks Justin for putting together this loader --- it has saved me (and I'm sure others) a lot of time. Much appreciated!

File to import not found or unreadable with sass-loader 1.0.3

Hey Justin,

I'm not sure if this is a problem with your bootstrap-sass-loader or sass-loader but I thought I would let you know. My setup can be found in my repo isomorphic-react-example. My code base is based off of react-starter-kit and I run my webpack config and bundling through gulpfile.babel.js.

When I attempted to bundle bootstrap with your loader and [email protected] I got the following error message:

ERROR in ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!./~/style-loader!./~/css-loader!./~/sass-loader?sourceMap!./~/bootstrap-sass-loader/bootstrap-sass-styles.loader.js!./bootstrap-sass.config.js
Module build failed: ModuleBuildError: Module build failed: 
var ExtractTextPlugin = require('extract-text-webpack-plugin');
       ^
      File to import not found or unreadable: Users/akay/devel/isomorphic-react-example/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables.scss
      in /Users/akay/devel/isomorphic-react-example/bootstrap-sass.config.js (line 1, column 9)
    at DependenciesBlock.onModuleBuildFailed (/Users/akay/devel/isomorphic-react-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/Users/akay/devel/isomorphic-react-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /Users/akay/devel/isomorphic-react-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/Users/akay/devel/isomorphic-react-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.onRender (/Users/akay/devel/isomorphic-react-example/node_modules/sass-loader/index.js:160:13)
    at options.error (/Users/akay/devel/isomorphic-react-example/node_modules/node-sass/lib/index.js:279:32)
 @ ./~/bootstrap-sass-loader/index.loader.js!./bootstrap-sass.config.js 1:0-369

However, if I downgrade to [email protected] everything compiles fine.

how do i include bootswatch customizations for _variables and _bootswatch?

i am using a config like so..

var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  preBootstrapCustomizations: './src/scss/_variables.scss',
  bootstrapCustomizations: './src/scss/_bootswatch.scss',
  mainSass: './src/scss/index.scss',
  verbose: false,
  debug: false,
...

however when i run webpack i get an error...

ERROR in ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!./~/style-loader!./~/css-loader!./~/sass-loader?outputStyle=expanded!./~/bootstrap-sass-loader/bootstrap-sass-styles.loader.js!./bootstrap-sass.config.js
Module build failed: ModuleBuildError: Module build failed:
    @include box-shadow(none);
            ^
      No mixin named box-shadow

extract-text-webpack-plugin

I think it'd be awesome if we can include the extract-text-webpack-plugin so the sass doesn't get included into a style tag.

$brand-* doesn't get overwritten

I don't know why, but $brand-primary has no affect.

Setup:

// Example file. Copy this to your project
module.exports = {
  verbose: true, // Set to true to show diagnostic information

  // IMPORTANT: Set next two configuration so you can customize
  // bootstrapCustomizations: gets loaded before bootstrap so you can configure the variables used by bootstrap
  // mainSass: gets loaded after bootstrap, so you can override a bootstrap style.
  // NOTE, these are optional.

   bootstrapCustomizations: "src/styles/bootstrap.scss",
   mainSass: "src/styles/main.scss",

  // Default for the style loading
  styleLoader: "style-loader!css-loader!sass-loader",
  //
  // If you want to use the ExtractTextPlugin
  //   and you want compressed
  //     styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader"),
  //
  // If you want expanded CSS
  //   styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader!sass?outputStyle=expanded"),

  scripts: {
    'transition': true,
    'alert': true,
    'button': true,
    'carousel': true,
    'collapse': true,
    'dropdown': true,
    'modal': true,
    'tooltip': true,
    'popover': true,
    'scrollspy': true,
    'tab': true,
    'affix': true
  },
  styles: {
    "mixins": true,

    "normalize": true,
    "print": true,

    "scaffolding": true,
    "type": true,
    "code": true,
    "grid": true,
    "tables": true,
    "forms": true,
    "buttons": true,

    "component-animations": true,
    "glyphicons": true,
    "dropdowns": true,
    "button-groups": true,
    "input-groups": true,
    "navs": true,
    "navbar": true,
    "breadcrumbs": true,
    "pagination": true,
    "pager": true,
    "labels": true,
    "badges": true,
    "jumbotron": true,
    "thumbnails": true,
    "alerts": true,
    "progress-bars": true,
    "media": true,
    "list-group": true,
    "panels": true,
    "wells": true,
    "close": true,

    "modals": true,
    "tooltip": true,
    "popovers": true,
    "carousel": true,

    "utilities": true,
    "responsive-utilities": true
  }
};
/*
 * Webpack development server configuration
 *
 * This file is set up for serving the webpack-dev-server, which will watch for changes and recompile as required if
 * the subfolder /webpack-dev-server/ is visited. Visiting the root will not automatically reload.
 */
'use strict';
var webpack = require('webpack'),
    path = require('path'),
    ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {

  output: {
    filename: 'app.js',
    publicPath: '/assets/'
  },

  cache: true,
  debug: true,
  devtool: false,
  entry: [
      'webpack/hot/only-dev-server',
      './src/scripts/app.js',
      'bootstrap-sass!./bootstrap-sass.config.js'
  ],

  stats: {
    colors: true,
    reasons: true
  },

  resolve: {
    extensions: ['', '.js'],
    alias: {
      'styles': __dirname + '/src/styles',
      'components': __dirname + '/src/scripts/components',
      'actions': __dirname + '/src/scripts/actions',
      'stores': __dirname + '/src/scripts/stores',
      'constants': __dirname + '/src/scripts/constants'
    }
  },
  module: {
    preLoaders: [{
      test: /\.js$/,
      exclude: /node_modules|bootstrap-sass.config.js/,
      loader: 'jsxhint'
    }],
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules|bootstrap-sass.config.js/,
      loader: 'react-hot!jsx-loader?harmony!babel-loader?optional=runtime'
    }, {
      test: /\.scss/,
      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
    }, {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }, {
      test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/,
      loader: 'url-loader?limit=8192'
    },
    { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
    // Needed for the css-loader when [bootstrap-webpack](https://github.com/bline/bootstrap-webpack)
    // loads bootstrap's css.
    { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,   loader: "url?limit=10000&minetype=application/font-woff" },
    { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&minetype=application/octet-stream" },
    { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,    loader: "file" },
    { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&minetype=image/svg+xml" }
    ]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery"
    }),
    new ExtractTextPlugin("main.css")
  ]

};

getting it to work

Hi, I am having some trouble to get it to work,
I first installed bootstrap-sass-loader
npm install --save bootstrap-sass-loader
which also installed bootstrap-sass.

Then I added
require('bootstrap-sass-loader');
to my index.js.

I want to use the full bootstrap, so I don't need to customize it. However, this doesn't seem to work when I define a
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>

I added

{
      test: /bootstrap\/js\//,
      loader: 'imports?jQuery=jquery',
    },
    {
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/font-woff',
    },
    {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/font-woff',
    },
    {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/octet-stream',
    },
    {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'file',
    },
    {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=image/svg+xml',
    }

to my webpack config, with no luck. Am I missing something here? Thanks!

1.0.7 ERROR: Could not find path to config.bootstrapCustomizations

Ref line 55 in bootstrap-sass-styles.loader.js: eda5080#56

My code specifies bootstrapCustomizations of './app/_bootstrap.config.scss'

In version 1.0.6, fileNameResolved is '/home/user/my-project/app/_bootstrap.config.scss'
In version 1.0.7, fileNameResolved is '_bootstrap.config.scss'

Which results in...
ERROR: Could not find path to config.bootstrapCustomizations: _bootstrap.config.scss

Style loader class name spaced

I'm currently trying to figure out if there is a way to include the bootstrap library wrapped in a class selector. e.g.

.app {
  @import `bootstrap`;
}

The reason I'd like to do this is because the I'm retrofitting a react app into an existing app that has several wrapping elements that depend on the legacy app style sheets which use an older version of bootstrap and I'd like to avoid overriding conflicting styles.

Essentially I need to change this style loader to look something like

var start =
     ".app { "
     + "@import          \"~bootstrap/less/variables.less\";\n"
    + "@icon-font-path: \"~bootstrap/fonts/\";\n"
    + "@import          \"./bootstrap.config.less\";\n";
    + "}"

Add global wrapper for CSS Modules

@alexfedoseev to comment more -- some rough notes.

We need to wrap the output of the imports like:

Since Webpack's CSS loader knows about :global so whether or not we use this with Wepback's Javascript CSS or extract-text-plugin on the CSS, this should work fine.

So we don't need an option. (wow!)

:global {
  @import "<file1>";
  @import "<file2>";
}

where these are the current files.

  @import "<file1>";
  @import "<file2>";

We'll want to update the example https://github.com/shakacode/bootstrap-sass-loader-example

Cannot load files...

So it finds and logs the file, all is good. And now it cannot load it for some reason and pointing to the wrong please for the error. All in all, it cannot import the bootstrap-config file...

here is the log:

[boostrap-sass-loader]: styleLoader: /Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!style-loader!css-loader!autoprefixer!sass?outputStyle=expanded
[boostrap-sass-loader]: bootstrap-sass location: /Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/bootstrap-sass/assets
[boostrap-sass-loader]: Setting: $icon-font-path: 'node_modules/bootstrap-sass/assets/fonts/bootstrap/';
[boostrap-sass-loader]: fileName for preBootstrapCustomizations: /Users/mmahalwy/Desktop/Code/quran.com/frontend/src/styles/_bootstrap-config.scss
[boostrap-sass-loader]: fileName for mainSass: /Users/mmahalwy/Desktop/Code/quran.com/frontend/src/styles/_main.scss
Hash: 0865bbc60349c612e85a
Version: webpack 1.10.3
Time: 15497ms
      Asset       Size  Chunks             Chunk Names
    main.js       2 MB       0  [emitted]  main
main.js.map    2.33 MB       0  [emitted]  main
 index.html  211 bytes          [emitted]
   [0] multi main 64 bytes {0} [built]
    + 491 hidden modules

ERROR in ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!./~/style-loader!./~/css-loader!./~/autoprefixer-loader!./~/sass-loader?outputStyle=expanded!./~/bootstrap-sass-loader/bootstrap-sass-styles.loader.js!./bootstrap-sass.config.js
Module build failed: ModuleBuildError: Module build failed:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
       ^
      File to import not found or unreadable: Users/mmahalwy/Desktop/Code/quran.com/frontend/src/styles/bootstrap-config.scss
      in /Users/mmahalwy/Desktop/Code/quran.com/frontend/bootstrap-sass.config.js (line 1, column 9)
    at DependenciesBlock.onModuleBuildFailed (/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.onRender (/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/sass-loader/index.js:160:13)
    at options.error (/Users/mmahalwy/Desktop/Code/quran.com/frontend/node_modules/node-sass/lib/index.js:279:32)
 @ ./~/bootstrap-sass-loader/index.loader.js!./bootstrap-sass.config.js 1:0-408
Child extract-text-webpack-plugin:
        + 1 hidden modules

    ERROR in ./~/css-loader!./~/autoprefixer-loader!./~/sass-loader?outputStyle=expanded!./~/bootstrap-sass-loader/bootstrap-sass-styles.loader.js!./bootstrap-sass.config.js
    Module build failed:
    var ExtractTextPlugin = require("extract-text-webpack-plugin");
           ^
          File to import not found or unreadable: Users/mmahalwy/Desktop/Code/quran.com/frontend/src/styles/bootstrap-config.scss
          in /Users/mmahalwy/Desktop/Code/quran.com/frontend/bootstrap-sass.config.js (line 1, column 9)

I should mention that my files are named correctly:
image

For some reason, it's looking for the non-partial file. When I remove that, then it errors saying it cannot find variables.scss from bootstrap. There must be something wrong with the import system?

update
Notice: unreadable: Users/mmahalwy/ it should be unreadable: /Users/mmahalwy/....

bootstrap-sass-loader with eslint-loader

Hi, I got the following errors with eslint-loader

ERROR in ./~/bootstrap-sass-loader/bootstrap-sass-scripts.loader.js!./app/styles/bootstrap-sass.config.js
Module build failed: Error: Cannot find module '/Users/allen/Node/react-universal-wafer-demo/node_modules/eslint-loader/index.js!/Users/allen/Node/react-universal-wafer-demo/app/styles/bootstrap-sass.config.js'
    at Function.Module._resolveFilename (module.js:337:15)
    at Function.Module._load (module.js:287:25)
    at Module.require (module.js:366:17)
   ....

and this is my module configuration in webpack

module: {
    preLoaders: [
      { test: JS_REGEX, exclude: /(node_modules)/, loader: 'eslint' }
    ],
    loaders: [
      { test: JS_REGEX, exclude: /(node_modules)/, loader: 'babel' }
    ]
}

Currently, a workaround is to exclude bootstrap-sass.config when webpack loading
Anyway, I use [email protected] and [email protected] and I'm sure the path of bootstrap-sass.config.js is correct, so any idea?
Thanks

Using the glyphicon set

I'm firstly not sure if this is a problem with this loader, or I just have a poor grasp on webpack.

Here is my app configuration.

Do I need to use a special loader to get those font files working? I've been trying to figure this out for two days. I know I can do this the wrong way and just copy the font files into public/fonts, but I want to know the correct way to do this.

Any thoughts/ideas?

"1.a Complete Bootstrap" not working for me

I'm learning Webpack, so this is probably pretty basic stuff.

Thought I'd start by trying to get Bootstrap working, so I found this repo and gave it a try. Added require("bootstrap-sass-loader"); to my entry.js file and run webpack-dev-server. Get this output:

http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /home/brendan/Projects/passit-proto
Hash: 1be5be6dbbcbf9ba03ed
Version: webpack 1.12.9
Time: 108ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.94 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 1.39 kB [rendered]
    [0] ./entry.js 104 bytes {0} [built]
    [1] ./~/bootstrap-sass-loader/index.js 54 bytes {0} [built]
    [2] ./~/bootstrap-sass-loader/bootstrap-sass-no-customizations.config.js 1.23 kB {0} [built]
webpack: bundle is now VALID.

Here's my webpack.config.js file:

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    }
};

No errors on build, and I'm pretty sure everything is wired up correctly in terms of paths because if I look at bundle.js, it shows the contents of bootstrap-sass-no-customizations.config.js

But when I load up http://localhost:8080, I don't see any evidence that anything other than that config file was loaded. No evidence of Sass or the actual JS files being placed.

Am I missing a step here? Any help is appreciated.

extract text plugin

Hey, so I noticed that within your examples using extract text plugin, you had to require the extract plugin both in your loader config and webpack config. I believe this makes it so that the css is actually output in both the js and css bundle, unless I did it improperly? Is there some way that I can use the same instance of extract text plugin so as to avoid the duplication?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.