mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-23 01:57:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: Make project compatible with webpack sass-loader (#1221)

Browse Source
This commit is contained in:
Federico Zivolo 2017-09-10 17:46:59 +02:00 committed by GitHub
parent 9a9813aa90
commit 4025fc5502
6 changed files with 62 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/scss/docs.scss
View File

@ -26,7 +26,7 @@
// Load Bootstrap variables and mixins // Load Bootstrap variables and mixins
@import "../../scss/functions"; @import "../../scss/functions";
@import "../../scss/variables"; @import "../../scss/variables";
@import "bootstrap/scss/mixins"; @import "~bootstrap/scss/mixins";
@import "../../scss/mixins"; @import "../../scss/mixins";
// Load docs components // Load docs components

15
docs/4.0/getting-started/build-tools.md
View File

@ -8,12 +8,12 @@ toc: true
## Tooling setup ## Tooling setup
Bootstrap uses [NPM scripts](https://docs.npmjs.com/misc/scripts) for its build system. Our [package.json](https://github.com/twbs/bootstrap/blob/v4-dev/package.json) includes convenient methods for working with the framework, including compiling code, running tests, and more. Bootstrap uses [NPM scripts](https://docs.npmjs.com/misc/scripts) for its build system. Our [package.json](https://github.com/FezVrasta/bootstrap-material-design/blob/v4/package.json) includes convenient methods for working with the framework, including compiling code, running tests, and more.
To use our build system and run our documentation locally, you'll need a copy of Bootstrap's source files and Node. Follow these steps and you should be ready to rock: To use our build system and run our documentation locally, you'll need a copy of Bootstrap's source files and Node. Follow these steps and you should be ready to rock:
1. [Download and install Node](https://nodejs.org/download/), which we use to manage our dependencies. 1. [Download and install Node](https://nodejs.org/download/), which we use to manage our dependencies.
2. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json](https://github.com/twbs/bootstrap/blob/master/package.json). 2. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json](https://github.com/FezVrasta/bootstrap-material-design/blob/v4/package.json).
4. [Install Ruby][install-ruby], install [Bundler][gembundler] with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins. 4. [Install Ruby][install-ruby], install [Bundler][gembundler] with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins.
- **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems. - **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems.
@ -24,13 +24,13 @@ When completed, you'll be able to run the various commands provided from the com
## Using NPM scripts ## Using NPM scripts
Our [package.json](https://github.com/twbs/bootstrap/blob/master/package.json) includes the following commands and tasks: Our [package.json](https://github.com/FezVrasta/bootstrap-material-design/blob/v4/package.json) includes the following commands and tasks:
| Task | Description | | Task | Description |
| --- | --- | | --- | --- |
| `npm test` | Run `npm test` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** | | `npm test` | Run `npm test` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** |
| `npm run dist` | `npm run dist` creates the `/dist` directory with compiled files. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** | | `npm run dist` | `npm run dist` creates the `/dist` directory with compiled files. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** |
| `npm run docs` | Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via `npm run docs-serve`. | | `npm run docs` | Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via `npm run docs:serve`. |
## Autoprefixer ## Autoprefixer
@ -48,6 +48,13 @@ Running our documentation locally requires the use of Jekyll, a decently flexibl
Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/home/). Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/home/).
## Sass
We use Sass to write our CSS stylesheets, unfortunately, due to discrepancies between versions, we decided to support only the implementation provided by [LibSass](http://sass-lang.com/libsass).
This means that you won't be able to compile the stylesheets using `ruby-sass`.
To learn more about the differences please read [this article](http://sassbreak.com/ruby-sass-libsass-differences/).
## Troubleshooting ## Troubleshooting
Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun `npm install`. Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.

6
package.json
View File

@ -20,13 +20,13 @@
"scripts": { "scripts": {
"docs:compile": "bundle exec jekyll build", "docs:compile": "bundle exec jekyll build",
"docs:serve": "bundle exec jekyll serve", "docs:serve": "bundle exec jekyll serve",
"docs:assets": "node-sass --include-path node_modules assets/scss/docs.scss > assets/css/docs.css && cssnano assets/css/docs.css assets/css/docs.min.css", "docs:assets": "node-sass --importer=node_modules/node-sass-tilde-importer assets/scss/docs.scss > assets/css/docs.css && cssnano assets/css/docs.css assets/css/docs.min.css",
"docs:deploy": "./deploy.sh", "docs:deploy": "./deploy.sh",
"prepare": "npm run build", "prepare": "npm run build",
"build": "npm run build:js && npm run build:css", "build": "npm run build:js && npm run build:css",
"build:js": "rollup js/index.js --output=dist/js/bootstrap-material-design.js -m --config=rollup.config.js && npm run build:js-min", "build:js": "rollup js/index.js --output=dist/js/bootstrap-material-design.js -m --config=rollup.config.js && npm run build:js-min",
"build:js-min": "minify dist/js/bootstrap-material-design.js --out-file dist/js/bootstrap-material-design.min.js", "build:js-min": "minify dist/js/bootstrap-material-design.js --out-file dist/js/bootstrap-material-design.min.js",
"build:css": "mkdir -p dist/css && node-sass --include-path node_modules scss/bootstrap-material-design.scss > dist/css/bootstrap-material-design.css && npm run build:css-min", "build:css": "mkdir -p dist/css && node-sass --importer=node_modules/node-sass-tilde-importer scss/bootstrap-material-design.scss > dist/css/bootstrap-material-design.css && npm run build:css-min",
"build:css-min": "cssnano dist/css/bootstrap-material-design.css dist/css/bootstrap-material-design.min.css" "build:css-min": "cssnano dist/css/bootstrap-material-design.css dist/css/bootstrap-material-design.min.css"
}, },
"style": "dist/css/bootstrap-material-design.css", "style": "dist/css/bootstrap-material-design.css",
@ -40,7 +40,6 @@
"url": "https://github.com/FezVrasta/bootstrap-material-design/issues" "url": "https://github.com/FezVrasta/bootstrap-material-design/issues"
}, },
"license": "MIT", "license": "MIT",
"dependencies": {},
"devDependencies": { "devDependencies": {
"babel-core": "^6.25.0", "babel-core": "^6.25.0",
"babel-minify": "^0.2.0", "babel-minify": "^0.2.0",
@ -52,6 +51,7 @@
"cssnano-cli": "^1.0.5", "cssnano-cli": "^1.0.5",
"jquery": ">=3.0.0", "jquery": ">=3.0.0",
"node-sass": "^4.5.3", "node-sass": "^4.5.3",
"node-sass-tilde-importer": "^1.0.0",
"popper.js": "^1.11.0", "popper.js": "^1.11.0",
"prettier": "^1.5.3", "prettier": "^1.5.3",
"rollup": "^0.45.2", "rollup": "^0.45.2",

70
scss/_core-bootstrap.scss
View File

@ -3,9 +3,9 @@
//@import "../../bootstrap/scss/ //@import "../../bootstrap/scss/
// Core variables and mixins // Core variables and mixins
@import "bootstrap/scss/functions"; @import "~bootstrap/scss/functions";
@import "bootstrap/scss/variables"; @import "~bootstrap/scss/variables";
@import "bootstrap/scss/mixins"; @import "~bootstrap/scss/mixins";
// #853 start - https://github.com/twbs/bootstrap/pull/18976/files // #853 start - https://github.com/twbs/bootstrap/pull/18976/files
// hack // hack
@ -24,43 +24,43 @@
// #853 end - https://github.com/twbs/bootstrap/pull/18976/files // #853 end - https://github.com/twbs/bootstrap/pull/18976/files
// Reset and dependencies // Reset and dependencies
@import "bootstrap/scss/reboot"; @import "~bootstrap/scss/reboot";
@import "bootstrap/scss/print"; @import "~bootstrap/scss/print";
// Core CSS // Core CSS
@import "bootstrap/scss/reboot"; @import "~bootstrap/scss/reboot";
@import "bootstrap/scss/type"; @import "~bootstrap/scss/type";
@import "bootstrap/scss/images"; @import "~bootstrap/scss/images";
@import "bootstrap/scss/code"; @import "~bootstrap/scss/code";
@import "bootstrap/scss/grid"; @import "~bootstrap/scss/grid";
@import "bootstrap/scss/tables"; @import "~bootstrap/scss/tables";
@import "bootstrap/scss/forms"; @import "~bootstrap/scss/forms";
@import "bootstrap/scss/buttons"; @import "~bootstrap/scss/buttons";
@import "bootstrap/scss/transitions"; @import "~bootstrap/scss/transitions";
// Components // Components
@import "bootstrap/scss/dropdown"; @import "~bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group"; @import "~bootstrap/scss/button-group";
@import "bootstrap/scss/input-group"; @import "~bootstrap/scss/input-group";
@import "bootstrap/scss/custom-forms"; @import "~bootstrap/scss/custom-forms";
@import "bootstrap/scss/nav"; @import "~bootstrap/scss/nav";
@import "bootstrap/scss/navbar"; @import "~bootstrap/scss/navbar";
@import "bootstrap/scss/card"; @import "~bootstrap/scss/card";
@import "bootstrap/scss/breadcrumb"; @import "~bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination"; @import "~bootstrap/scss/pagination";
@import "bootstrap/scss/jumbotron"; @import "~bootstrap/scss/jumbotron";
@import "bootstrap/scss/alert"; @import "~bootstrap/scss/alert";
@import "bootstrap/scss/progress"; @import "~bootstrap/scss/progress";
@import "bootstrap/scss/media"; @import "~bootstrap/scss/media";
@import "bootstrap/scss/list-group"; @import "~bootstrap/scss/list-group";
@import "bootstrap/scss/close"; @import "~bootstrap/scss/close";
@import "bootstrap/scss/badge"; @import "~bootstrap/scss/badge";
// Components w/ JavaScript // Components w/ JavaScript
@import "bootstrap/scss/modal"; @import "~bootstrap/scss/modal";
@import "bootstrap/scss/tooltip"; @import "~bootstrap/scss/tooltip";
@import "bootstrap/scss/popover"; @import "~bootstrap/scss/popover";
@import "bootstrap/scss/carousel"; @import "~bootstrap/scss/carousel";
// Utility classes // Utility classes
@import "bootstrap/scss/utilities"; @import "~bootstrap/scss/utilities";

4
scss/_variables.scss
View File

@ -42,8 +42,8 @@ $bmd-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted
// import their vars after customization for use below // import their vars after customization for use below
$enable-flex: true; // fully adopt flexbox layouts $enable-flex: true; // fully adopt flexbox layouts
$enable-shadows: true; // enable shadows, set to false to turn off shadows $enable-shadows: true; // enable shadows, set to false to turn off shadows
@import "bootstrap/scss/functions"; // from bootstrap node_module @import "~bootstrap/scss/functions"; // from bootstrap node_module
@import "bootstrap/scss/variables"; // from bootstrap node_module @import "~bootstrap/scss/variables"; // from bootstrap node_module
// //
@import "variables/layout"; @import "variables/layout";

10
yarn.lock
View File

@ -1040,6 +1040,10 @@ extsprintf@1.3.0, extsprintf@^1.2.0:
version "1.3.0" version "1.3.0"
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05" resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
find-parent-dir@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/find-parent-dir/-/find-parent-dir-0.3.0.tgz#33c44b429ab2b2f0646299c5f9f718f376ff8d54"
find-up@^1.0.0: find-up@^1.0.0:
version "1.1.2" version "1.1.2"
resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f" resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@ -1545,6 +1549,12 @@ node-gyp@^3.3.1:
tar "^2.0.0" tar "^2.0.0"
which "1" which "1"
node-sass-tilde-importer@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/node-sass-tilde-importer/-/node-sass-tilde-importer-1.0.0.tgz#653d048a270464a1865ef9a99cc80ee2d80f9c97"
dependencies:
find-parent-dir "^0.3.0"
node-sass@^4.5.3: node-sass@^4.5.3:
version "4.5.3" version "4.5.3"
resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.3.tgz#d09c9d1179641239d1b97ffc6231fdcec53e1568" resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.3.tgz#d09c9d1179641239d1b97ffc6231fdcec53e1568"