Webpack4+React16配置CSS、Sass并导入Antd

Style Demo

Webpack4.x+Babel7.x+React16.x环境下配置CSS、Sass
导入Ant Design UI库

Webpack4.x+Babel7.x+React16.x平台搭建请点击观看上一篇文章

新建项目

按照上一篇文章的方法新建一个新项目style-demo

配置CSS和Sass支持

• 安装sass-loader和node-sass

npm i -D sass-loader node-sass

• 修改webpack.base.conf.js配置文件module属性

  module: {
    rules: [
      {
        loader: require.resolve('file-loader'),
        exclude:[/\.js$/,/\.jsx$/,/\.html$/,/\.json$/,/\.scss$/,/\.css$/],
        options:{
          name:'static/media/[name].[hash:8].[ext]',
        },
      },
      {
        test: /\.js|jsx$/,
        exclude: /node_modules/,// 屏蔽不需要处理的文件（文件夹）（可选）
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      },
      {
        test: /\.scss$/,
        use: ['style-loader','css-loader','sass-loader'],
      }
    ]
  },

• 新建一个scss样式文件，引入测试（略）

引入Ant Design

• 安装antd

npm i -S antd

• 安装babel-plugin-import工具实现按需加载

npm i -S babel-plugin-import

• 修改webpack.base.conf.js配置文件js的loader部分

{
    test: /\.js|jsx$/,
    exclude: /node_modules/,// 屏蔽不需要处理的文件（文件夹）（可选）
    loader: 'babel-loader',
    options:{
        plugins:
        [
            ['import', { libraryName: "antd", style: 'css' }],
        ]
    }
},

• 在App.js组件里面引入antd的组件，测试查看效果（略）