antd-scss-theme-plugin - A Webpack plugin for customizing Ant Design with an SCSS theme file and using Ant Design's compiled variables in SCSS files throughout your project

  •        164

πŸ“– For a more detailed overview of the plugin and its usage, check out the Using Ant Design in Sass-Styled Projects article on Intoli's blog. To use antd-scss-theme-plugin, you need to configure Ant Design to use Less stylesheets when loading components, and to connect a few loaders with the plugin in your Webpack setup. You can find a fully configured project in the example directory.

https://github.com/intoli/antd-scss-theme-plugin

Dependencies:

less : ^2.3.7
loader-utils : ^1.1.0
scss-to-json : ^2.0.0

Tags
Implementation
License
Platform

   




Related Projects

sass-loader - Compiles Sass to CSS

  •    HTML

Loads a Sass/SCSS file and compiles it to CSS. Use the css-loader or the raw-loader to turn it into a JS module and the mini-css-extract-plugin to extract it into a separate file. Looking for the webpack 1 loader? Check out the archive/webpack-1 branch.

isomorphic-style-loader - CSS style loader for Webpack that is optimized for isomorphic (universal) web apps

  •    Javascript

CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rendering and also works great in the context of isomorphic apps. It provides two helper methods on to the styles object - ._insertCss() (injects CSS into the DOM) and ._getCss() (returns a CSS string).Note: Configuration is the same for both client-side and server-side bundles. For more information visit https://webpack.js.org/configuration/module/.

resolve-url-loader - Webpack loader that resolves relative paths in url() statements based on the original source file

  •    Javascript

A webpack loader that rewrites relative paths in url() statements based on the original source file. With webpack you can import a .scss file (or some other compile-to-css file) and have a loader take care of the transpilation. With Sass (at least) this file can include a whole tree of source files into a single output.

stylelint-webpack-plugin - A webpack plugin to lint your CSS/Sass code using stylelint

  •    Javascript

This module requires a minimum of Node v6.9.0 and webpack v4.0.0. Both stylelint-loader and this module have their uses. stylelint-loader lints the files you require (or the ones you define as an entry in your webpack config). However, @imports in files are not followed, meaning only the main file for each require/entry is linted.

bootstrap-loader - Load Bootstrap styles and scripts in your Webpack bundle

  •    Javascript

If your team might need my help, please email me for a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products. Intersted in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable? Contact me.


sass-resources-loader - SASS resources (e.g. variables, mixins etc.) loader for Webpack

  •    Javascript

If your team might need my help, please email me for a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products. Note, this loader is not limited to SASS resources. It supposedly works with less, post-css, etc. per issue 31.

webpack-starter - ✨ A lightweight foundation for your next webpack based frontend project.

  •    Javascript

A lightweight foundation for your next webpack based frontend project. When you run npm run build we use the mini-css-extract-plugin to move the css to a separate file and included in the head of your index.html, so that the styles are applied before any javascript gets loaded. We disabled this function for the dev version, because the loader doesn't support hot module replacement.

react-css-components - Define React presentational components with CSS

  •    Javascript

Define React presentational components with CSS (or even SASS or Less if you like). The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules.

less-loader - Compiles Less to CSS

  •    Javascript

A Less loader for webpack. Compiles Less to CSS. This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

babel-plugin-webpack-loaders - babel 6 plugin which allows to use webpack loaders

  •    Javascript

Since plugin was published, there were a lot of changes in testing software. Be sure in most(all) cases you DON'T need this plugin for testing. I highly recommend you to use jest for testing, and use moduleNameMapper (identity-obj-proxy, etc) to mock CSS-Modules and other webpack loaders. This Babel 6 plugin allows you to use webpack loaders in Babel. It's now easy to run universal apps on the server without additional build steps, to create libraries as usual with babel src --out-dir lib command, to run tests without mocking-prebuilding source code. It just replaces require - import statements with webpack loaders results. Take a look at this Babel build output diff to get the idea.

ts-loader - TypeScript loader for webpack

  •    Javascript

This is the typescript loader for webpack. We have a number of example setups to accomodate different workflows. From "vanilla" ts-loader, to using ts-loader in combination with babel for transpilation, happypack or thread-loader for faster builds and fork-ts-checker-webpack-plugin for performing type checking in a separate process. Not forgetting Hot Module Replacement. Our examples can be found here.

awesome-sass - 🎨 Curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources

  •    

Curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources. Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly.

html-webpack-plugin - Simplifies creation of HTML files to serve your webpack bundles

  •    Javascript

This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader. The html-webpack-plugin works without configuration. It's a great addition to the βš™οΈ webpack-config-plugins.

workerize-loader - πŸ—οΈ Automatically move a module into a Web Worker (Webpack loader)

  •    Javascript

A webpack loader that moves a module and its dependencies into a Web Worker, automatically reflecting exported functions as asynchronous proxies.

reactql - Universal React+GraphQL starter kit: React 16, Apollo 2, Webpack 4, Styled Components 4, React Router 4, PostCSS, SSR

  •    TypeScript

Universal front-end React + GraphQL starter kit, written in Typescript. Hot code reloading. Make a change anywhere in your code base (outside of the Webpack config), and changes will be pushed down the browser automatically - without page reloads. This happens for React, Styled Components, SASS - pretty much anything.

bootswatch-rails - Bootswatches converted to SCSS ready to use in Rails asset pipeline.

  •    Ruby

This gem is meant to be used with bootstrap-sass. It gives you complete scss versions of bootswatches for use in your Rails asset pipeline, just like bootstrap-sass gives you scss version of bootstrap itself. When using bootstrap-sass, it's recommended to avoid sprockets in your stylesheets. In order to do that you simply rename your application.css file to application.css.scss, remove all sprockets comments, and instead use sass @import commands. These commands are smart enough to fully support asset pipeline load paths, thanks to sass-rails gem.

svg-sprite-loader - Webpack loader for creating SVG sprites.

  •    Javascript

Webpack loader for creating SVG sprites. πŸŽ‰ 2.0 is out, please read the migration guide & overview.

html-webpack-template - a better default template for html-webpack-plugin

  •    HTML

This is a template for the webpack plugin html-webpack-plugin. It has a few extra features more than the default template which will hopefully make it less likely that you'll have to create your own index.html file in your webpack project. Templates for the html-webpack-plugin are implemented using underscore templates (previously, in 2.x, blueimp templates). You can write your own as well.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.