# @alifd/next-theme-loader

> A webpack loader for injecting scss variables of theme package to scss file.

Latest version **1.3.1** (published 2019-03-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @alifd/next-theme-loader
pnpm add @alifd/next-theme-loader
yarn add @alifd/next-theme-loader
bun add @alifd/next-theme-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2019-03-08 |
| First published | 2018-08-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Maintainers | aboutblank, bindoon, myronliu347, no-repeat, tao1991123, vicerwang, wwsun |
| Keywords | fusion, next, theme, webpack, loader |

## Links

- npm: https://www.npmjs.com/package/@alifd/next-theme-loader
- Repository: https://github.com/alibaba-fusion/next-theme-loader
- Issues: https://github.com/alibaba-fusion/next-theme-loader/issues
- npm.io page: https://npm.io/package/@alifd/next-theme-loader

## Dependencies (1)

- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.3.1 (latest) — 2019-03-08
- 1.3.2 (beta) — 2020-06-24
- 1.3.0 — 2018-12-27
- 1.2.0 — 2018-12-27
- 1.1.2 — 2018-11-06
- 1.1.1 — 2018-09-28
- 1.1.0 — 2018-09-28
- 1.0.0 — 2018-08-21

## README

# @alifd/next-theme-loader
A webpack loader for injecting scss variables of theme package to scss file.

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



## Install

```
npm install babel-plugin-import --save-dev
npm install @alifd/next-theme-loader --save-dev
npm install @alifd/next-theme-webpack-plugin --save-dev
```

## Usage

### webpack 2+

``` js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ThemePlugin = require('@alifd/next-theme-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 }]
          ]
        }
      },
      exclude: /node_modules/
    }, {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        use: 'css-loader'
      })
    }, {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        use: [
          'css-loader',
          'fast-sass-loader',
          {
            loader: '@alifd/next-theme-loader',
            options: {
              theme: '@alifd/theme-package', /* variables only modified (optional)*/
              modifyVars: {'$css-prefix': 'my-'} /* custom variable (optional) */
            }
          }
        ]
      })
    }]
  },
  plugins: [
    new ThemePlugin({ theme: '@alifd/theme-package' }),
    new ExtractTextPlugin('[name].css')
  ]
};
```

### webpack 1

webpack.config.js

``` js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ThemePlugin = require('@alifd/next-theme-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: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel',
      query: {
        presets: [
          'es2015',
          'react',
          'stage-0'
        ],
        plugins: [
          'add-module-exports',
          'transform-decorators-legacy',
          ['babel-plugin-import', { style: true }]
        ]
      },
      exclude: /node_modules/
    }, {
      test: /\.css$/,
      loaders: ExtractTextPlugin.extract('css')
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('css!fast-sass!@alifd/next-theme-loader?theme=@alifd/theme-package')
    }]
  },
  plugins: [
    new ThemePlugin({ theme: '@alifd/theme-package' }),
    new ExtractTextPlugin('[name].css')
  ]
};
```


## Query

* `theme`(String): theme package(eg: @alifd/theme-1) which come from https://fusion.design
* `base`(String): package with all variables (eg: [@alifd/next](https://www.npmjs.com/package/@alifd/next))
* `modifyVars`(String/Object): inject some variables, such as: `$css-prefix` or `$icon-font-path`, value may be the following two types
  * `{ '$css-prefix': '"my-"' }`
  * `path.join(__dirname, 'variable.scss')`, it should be an absolute path

**Note:** if you want to set modifyVars to object under webpack1, you should write as below:

``` js
{
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract(`css!sass!@alifd/next-theme-loader?${JSON.stringify({ theme: '@alifd/theme-package', modifyVars: { '$css-prefix': '"my-"', '$icon-font-path': '"//xxx.com"' } })}`)
}
```

---
_Source: https://npm.io/package/@alifd/next-theme-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._