# Use with Theme Package

If the default theme style does not meet your visual needs, you can configure a custom theme style package with the powerful style configuration capabilities provided by Fusion Design. It is essentially a scss variable package, maintained by an npm package, below The documentation uses the `@alifd/theme-xxx` example to illustrate the use of the theme package.

## Install

```
npm install @alifd/theme-xxx --save
```

## Import

### Import All

``` js
import '@alifd/theme-xxx/index.scss';
// import '@alifd/theme-xxx/dist/next.css';

import { Button, Input } from '@alifd/next';
```

**Note:** If you are using a pre-compiled css file in the theme package, after upgrading the dependent next package, please upgrade the theme package to the corresponding component package version to prevent potential problems caused by js/css mismatch.

### Import Modular
Except as mentioned in the Quick Start section [babel-plugin-import] (https://github.com/ant-design/babel-plugin-import), you also need to use [@alifd/next-theme-loader]( Https://github.com/alibaba-fusion/next-theme-loader) and [@alifd/next-theme-webpack-plugin](https://github.com/alibaba-fusion/next-theme-webpack- Plugin), refer to the following webpack configuration:

``` js
const path = require('path');
const webpack = require('webpack');
const ThemePlugin = require('@alifd/next-theme-webpack-plugin');
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',
            ['import', {
                libraryName: '@alifd/next',
                style: true
            }]
          ]
        }
      },
      exclude: /node_modules/
    }, {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        use: 'css-loader'
      })
    }, {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        use: [
          'css-loader',
          'fast-sass-loader',
          {
            // add @alifd/next-theme-loader to inject the scss variable of the custom theme package
            loader: '@alifd/next-theme-loader',
            options: {
              theme: '@alifd/theme-xxx'
            }
          }
        ]
      })
    }]
  },
  plugins: [
    // add @alifd/next-theme-webpack-plugin to inject normalize css and custom icon css
    new ThemePlugin({ theme: '@alifd/theme-xxx' }),
    new ExtractTextPlugin('[name].css')
  ]
};
```