0

问题现象

按照antd-mobile文档所写,如下两种引用方式会按需加载对应组件代码和样式:

import { Accordion, List } from 'antd-mobile'

import DatePicker from 'antd-mobile/lib/date-picker';  // 加载 JS
import 'antd-mobile/lib/date-picker/style/css';        // 加载 CSS
//import 'antd-mobile/lib/date-picker/style';

在实际打包过程中,该组件对应的css并未输出到公共css中。但是我引用Modal组件则能输出对应的样式,如下:

import { Modal } from 'antd-mobile'
const prompt = Modal.prompt

原因猜测

感觉是是webpack.config 的loader配置问题

配置代码

loader部分代码

// --------------------------- 处理 Lib 样式文件 -----------------------------------
      {
        test: /.*node_modules.*antd-mobile.*\.less$/,
        use: extractLibStyle.extract([
          // 'thread-loader',
          {
            loader: 'cache-loader',
            options: {
              cacheDirectory: __cache__loader__directory
            }
          },
          'css-loader?minimize=false',
          'postcss-loader',
          {
            loader: 'less-loader',
            options: {
              javascriptEnabled: true,
              modifyVars: require('../../utils/antd-mobile/theme')
            }
          }
        ])
      },
      {
        test: /.*node_modules.*\.less$/,
        exclude: [/antd-mobile/],
        use: extractLibStyle.extract([
          // 'thread-loader',
          {
            loader: 'cache-loader',
            options: {
              cacheDirectory: __cache__loader__directory
            }
          },
          'css-loader?minimize=false',
          'less-loader?javascriptEnabled'
        ])
      },
      {
        test: /.*node_modules.*\.css$/,
        use: extractLibStyle.extract(['css-loader?minimize=false'])
      },

.babelrc

"development": {
      "plugins": [
        "transform-pipeline",
        "react-hot-loader/babel",
        "syntax-dynamic-import",
        "transform-decorators-legacy",
        "transform-async-functions",
        "transform-export-extensions",
        ["import", { "libraryName": "antd-mobile", "style": true }],
        ["component", { "libraryName": "mint-ui", "style": true }]
      ]
    }

配置文件篇幅较长,所以就只截取部分代码

有没有老哥知道原因是啥呢?

2018-11-29 提问
0 个回答

撰写答案

你可能感兴趣的

推广链接