使用webpacker从第三方库导入CSS并做出反应

时间:2018-11-29 10:23:45

标签: ruby-on-rails reactjs webpacker

我正在使用红宝石,webpacker并做出反应。

如何从lib中添加css(如引导程序)

示例:

import "react-datepicker/dist/react-datepicker.css";

不起作用

我只想这样做:https://webpack.js.org/loaders/css-loader/#css-modules

我的.babelrc:

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "useBuiltIns": true
      }
    ],
    "react"
  ],
  "env": {
    "test": {
      "presets": [
        [
          "env"
        ],
        "react"
      ],
      "plugins": [
        "transform-react-jsx-source",
        "syntax-dynamic-import",
        "transform-object-rest-spread",
        [
          "transform-class-properties",
          {
            "spec": true
          }
        ],
        "transform-object-rest-spread"
      ]
    }
  },
  "plugins": [
    "transform-react-jsx-source",
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ],
    "transform-object-rest-spread"
  ]
}

我的web打包程序:

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .coffee
    - .erb
    - .js
    - .jsx
    - .ts
    - .vue
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

0 个答案:

没有答案