Question

我试图从第三方lib导入CSS时遇到困难。除了npm install LIB之外，一些lib还需要导入css。

安装完lib之后，我会像我这样导入组件中的css

import Cards from 'react-credit-cards'    
import 'react-credit-cards/lib/styles.scss'

然后使用组件

<Cards
  number='XXXX XXXX XXXX XXXX'
  name='CARD HOLDER NAME'
  expiry='MONTH/YEAR'
  cvc='CVV/CVC'/>

第一次运行时，我在导入行中收到错误（找不到模块）。

然后我更改webpack以在节点模块上加载这些文件，如下所示：

{
        test: /.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1'),
        include: [
    >>>      /node_modules/, <<<
          /flexboxgrid/
        ]
      },
...
}

现在，它不会弹出错误，但是当我运行代码时，不会加载CSS。我还尝试将css复制并粘贴到我的全局css文件中，但仍无效。

最后，我的问题= D.要加载第三方lib CSS，我需要在webpack.config上设置更多内容吗？

修改

更改我的webpack文件后，CSS正在加载。但是， - 看下面这张图片 - 传递CSS时认为webpack生成一些HASH来识别类。卡组件仍然具有原始名称，生成的CSS使用此哈希值。

CARD COMPONENT

CSS OF react-credit-cards

以下是我webpack.config.json

的加载程序部分

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const PATHS = {
  app: path.join(__dirname, 'src'),
  build: path.join(__dirname, 'build'),
  assets: path.join(__dirname, 'assets')
}

const common = {
  entry: [
    PATHS.app
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        include: PATHS.app,
        loaders: ['babel']
      },
      {
        test: /.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1'),
        include: /flexboxgrid/
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1!sass?sourceMap'),
        exclude: /flexboxgrid/
      },
      {
        test: /\.jpe?g$|\.gif$|\.png$/i,
        loader: 'url?name=/imgs/[name].[ext]'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'url?name=/fonts/[name].[ext]'
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    modulesDirectories: [
      'node_modules',
      path.resolve(__dirname, './node_modules')
    ],
    packageMains: ['browser', 'web', 'browserify', 'main', 'style']
  }
}
...

Answer 1

我假设您正在尝试加载SCSS文件，而不是CSS文件。

webpack.config.js的相应部分可能如下所示：

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  resolve: {
    modules: [
      path.join(__dirname, 'src'), // to load from your src folder  
      path.join(__dirname, 'node_modules') // to load from node_modules
]
  },
  plugins: [
    new ExtractTextPlugin('app.css') // extract css and sass files into server.css bundle
  ],
  module: {
    rules: [
      ...
      {
        test: /\.(s?css|sass)$/, // css, scss and sass will be passed to sass-loader, then css-loader and then to ExtractTextPlugin and css will be extracted to app.css
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader', // if can't extract css, inline it into JS bundle
          use: [
            { loader: 'css-loader', options: {sourceMap: true} },
            { loader: 'sass-loader', options: {sourceMap: true} }
          ]
        })
      },

此配置适用于Webpack2，我假设与Webpack3的差异很小。

Answer 2

您正在尝试导入scss而不是css。你需要一台sass装载机。

做，

npm install sass-loader node-sass webpack --save-dev

然后，

将以下加载程序添加到您的webpack配置中。

{ test: /\.scss$/, include: paths.appSrc, loaders: ["style", "css", "sass"] }

EDITED - 如何从第3方lib导入CSS - REACT

2 个答案: