https://github.com/alibaba-fusion/next-reset-loader

A webpack loader for injecting @alifd/next/reset.scss and @alifd/theme-pakge/icons.scss to entry jsx file.
https://github.com/alibaba-fusion/next-reset-loader

Last synced: 6 days ago
JSON representation

A webpack loader for injecting @alifd/next/reset.scss and @alifd/theme-pakge/icons.scss to entry jsx file.

• Host: GitHub
• URL: https://github.com/alibaba-fusion/next-reset-loader
• Owner: alibaba-fusion
• License: mit
• Created: 2019-01-11T15:21:15.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T11:48:11.000Z (11 months ago)
• Last Synced: 2023-12-15T12:51:27.976Z (11 months ago)
• Language: JavaScript
• Size: 3.91 KB
• Stars: 0
• Watchers: 4
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @alifd/next-reset-loader

A webpack loader for injecting @alifd/next/reset.scss and @alifd/theme-pakge/icons.scss to entry jsx file.

[![npm package](https://img.shields.io/npm/v/@alifd/next-reset-loader.svg?style=flat-square)](https://www.npmjs.org/package/next-reset-loader)

## Install

```

npm install next-reset-loader --save-dev

npm install next-theme-loader --save-dev

```

## Usage

### webpack 2+

``` js

const path = require('path');

const webpack = require('webpack');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

  entry: {

    index: './src/index.jsx'

  },

  output: {

    path: path.join(__dirname, 'build'),

    filename: '[name].js'

  },

  resolve: {

    extensions: ['.js', '.jsx']

  },

  devtool: 'inline-source-map',

  module: {

    rules: [{

      test: /\.jsx?$/,

      use: [{

        loader: 'babel-loader',

        options: {

          presets: [

            'env',

            'react',

            'stage-0'

          ],

          plugins: [

            'add-module-exports',

            'transform-decorators-legacy',

            ['babel-plugin-import', { style: true }]

          ]

        }

      }, {

        loader: '@alifd/next-reset-loader',

        options: {

          theme: '@alifd/theme-package', /* icons modified (optional)*/

        },

      }],

      exclude: /node_modules/

    }, {

      test: /\.css$/,

      use: ExtractTextPlugin.extract({

        use: 'css-loader'

      })

    }, {

      test: /\.scss$/,

      use: ExtractTextPlugin.extract({

        use: [

          'css-loader',

          'fast-sass-loader',

          {

            loader: 'next-reset-loader',

            options: {

              theme: '@alifd/theme-package', /* variables only modified (optional)*/

              modifyVars: {'$css-prefix': 'my-'} /* custom variable (optional) */

            }

          }

        ]

      })

    }]

  }

};

```

## Query

* `theme`(String): get icons.scss from theme package eg: @alifd/theme-1) which come from https://fusion.design

* `base`(String): get reset.scss from base package(default `@alifd/next`)