Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upGitHub is where the world builds software
Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world.
How to use antd-mobile with babel-plugin-import in this project #1464
Comments
hyden-tan
changed the title
hyden-tan
changed the title
|
i have the same issue.in Layout.js, import antdStyle from 'antd-mobile/dist/antd-mobile.less'; and export default withStyles(antdStyle,s)(Layout); |
|
This might help you |
|
Here's how to modify the latest revision of Importing CSS const config = {
{stuff ...}
module: {
{stuff ...}
rules: [
{stuff ...}
// Load antd here
{
test: /\.css$/,
include: [/node_modules\/.*antd/],
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
config: {
path: './tools/postcss.config.js',
},
},
},
],
},
// Rules for Style Sheets
{
test: reStyle,
exclude: [/node_modules\/.*antd/], // Don't load antd here!
rules: [
{stuff ...}
],
{a bunch of stuff ...}
// Only use babel-plugin-import in client side
clientConfig.module.rules[0].options.plugins = [...clientConfig.module.rules[0].options.plugins];
clientConfig.module.rules[0].options.plugins.push(['import', { libraryName: 'antd', style: 'css' }]);
export default [clientConfig, serverConfig];Importing LESS with theme support import lessToJS from 'less-vars-to-js';
import fs from 'fs';
// Where your theme.less file lives
const themeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, '../src/components/antTheme.less'), 'utf8'));
const config = {
{stuff ...}
module: {
{stuff ...}
rules: [
{stuff ...}
// Load antd here
{
test: /\.less$/,
include: [/node_modules\/.*antd/],
use: [
{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader", // compiles Less to CSS
options: {
modifyVars: themeVariables,
}
}
],
},
// Rules for Style Sheets
{
test: reStyle,
exclude: [/node_modules\/.*antd/], // Don't load antd here!
rules: [
{stuff ...}
],
{a bunch of stuff ...}
// Only use babel-plugin-import in client side
clientConfig.module.rules[0].options.plugins = [...clientConfig.module.rules[0].options.plugins];
clientConfig.module.rules[0].options.plugins.push(['import', { libraryName: 'antd', style: true }]);
export default [clientConfig, serverConfig]; |
|
ERROR in ./node_modules/css-loader??ref--6-rules-1!./node_modules/postcss-loader/lib??ref--6-rules-3!./node_modules/antd/lib/style/index.less ERROR in ./node_modules/css-loader??ref--6-rules-1!./node_modules/postcss-loader/lib??ref--6-rules-3!./node_modules/antd/lib/button/style/index.less (7:1) Unknown word 5 | @btn-prefix-cls: ~"@{ant-prefix}-btn";
@ ./node_modules/antd/lib/button/style/index.less 2:18-147 19:6-27:8 19:146-27:7 20:18-147 |
|
@tim-soft 按上面配置报错了。。。 |
|
@kolf in English please |
|
You need to exclude the ant-design dir from the default load, then include the ant-design lib in your own loader chain.
// Rules for Ant-Design
{
test: /\.less$/,
include: [
/[\\/]node_modules[\\/].*antd/,
resolvePath(SRC_DIR, 'components/antTheme.less'),
],
use: [
MiniCssExtractPlugin.loader,
//'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: isDebug,
minimize: isDebug ? false : minimizeCssOptions,
},
},
{
loader: 'postcss-loader',
options: {
config: {
path: './tools/postcss.config.js',
},
},
},
{
loader: "less-loader",
options: {
modifyVars: antThemeVars,
javascriptEnabled: true
}
}
]
},
// Rules for Style Sheets
{
test: reStyle,
exclude: [
/[\\/]node_modules[\\/].*antd/,
resolvePath(SRC_DIR, 'components/antTheme.less'),
],
rules: [
// Convert CSS into JS module
{
issuer: { not: [reStyle] },
use: 'isomorphic-style-loader',
},
// Process external/third-party styles
{
exclude: SRC_DIR,
loader: 'css-loader',
options: {
sourceMap: isDebug,
minimize: isDebug ? false : minimizeCssOptions,
},
},
// Process internal/project styles (from src folder)
{
include: SRC_DIR,
loader: 'css-loader',
options: {
// CSS Loader https://github.com/webpack/css-loader
importLoaders: 1,
sourceMap: isDebug,
// CSS Modules https://github.com/css-modules/css-modules
modules: true,
localIdentName: isDebug
? '[name]-[local]-[hash:base64:5]'
: '[hash:base64:5]',
// CSS Nano http://cssnano.co/
minimize: isDebug ? false : minimizeCssOptions,
},
},
// Apply PostCSS plugins including autoprefixer
{
loader: 'postcss-loader',
options: {
config: {
path: './tools/postcss.config.js',
},
},
},
// Compile Less to CSS
// https://github.com/webpack-contrib/less-loader
// Install dependencies before uncommenting: yarn add --dev less-loader less
// {
// test: /\.less$/,
// loader: 'less-loader',
// },
// Compile Sass to CSS
// https://github.com/webpack-contrib/sass-loader
// Install dependencies before uncommenting: yarn add --dev sass-loader node-sass
// {
// test: /\.(scss|sass)$/,
// loader: 'sass-loader',
// },
],
},
clientConfig.module.rules[0].options.plugins = [
...clientConfig.module.rules[0].options.plugins,
['import', { libraryName: 'antd', style: true }],
]; |
I want to add antd-mobile to featrue/redux, and use babel-plugin-import, in my webpack-config.js:
but it does not work.