Question

我的应用程序使用React Select（https://github.com/JedWatson/react-select），由于某种原因，我的应用程序无法上传其CSS定义。我的webpack是：

var webpack = require('webpack');
// var ExtractTextPlugin = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = [
  {
    entry: './ui/moduleTest/entry.js',
    output: { path: __dirname + '/public/compiled', filename: 'mod1bundle.js' },
    module: {
      rules: [
        { test: /\.jsx?$/, loader: 'babel-loader', include: /ui/, query: { presets: ['@babel/preset-env', '@babel/preset-react'] } },
        { test: /\.scss$/,
              use:  [  'style-loader', 
                       MiniCssExtractPlugin.loader, 
                       'css-loader', 
                       'sass-loader']
        },
        { test: /\.css$/i,
          use:  [  {loader: 'style-loader', 
                   options: { injectType: 'styleTag' } },                  
                   'css-loader']
        }        
      ]
    },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css',
    })
  ]
}

];

我的代码编译并运行。但是，某些事情不允许我的应用程序上载为React Select定义的CSS样式。

尊重React Select，我只能看到一个标签和一个文本框，如：

我无法将其其他功能视为下拉列表。我的react组件是：

render(){

const customStyles = {
    option: (provided, state) => ({
      ...provided,
      borderBottom: '1px dotted pink',
      color: state.isSelected ? 'red' : 'blue',
      padding: 20,
    }),
    control: () => ({
      // none of react-select's styles are passed to <Control />
      width: 200,
    }),
    singleValue: (provided, state) => {
      const opacity = state.isDisabled ? 0.5 : 1;
      const transition = 'opacity 300ms';

      return { ...provided, opacity, transition };
    }
  }

return(
        <div>
                <Select id="analistsSelect001"                             
                     styles={customStyles}
                     key={"analistsSelect001"}

                     name='analistsSelect001'
                     placeholder='Choose Analyst'
                     clearable={false}
                     value={parseStringToSelectFormat(this.state.selectedAnalyst)}
                     multi={false}
                     options={parseToSelectFormat(this.props.analystsMaps.get('elemPKList'))}
                     onChange={this.handle_selectedAnalyst_Change}
                     searchable
                />

        </div>
)
}

我想补充一点，我能够使用以下命令导入主要的CSS属性：

导入'react-select / dist / react-select.css';

但是，有些.scss文件需要处理，我不知道为什么我的webpack不允许这种情况发生。我应该开始使用旧版本的webpack吗？有关于哪个的任何想法？

使用React 16.9.0和“ webpack”加载CSS属性时出现问题：“ ^ 4.39.2”

0 个答案: