在react_on_rails應用程序中導入.css時Webpack加載器失敗？

我正嘗試在我的react-on-rails應用上使用react-datetime。爲了使日期時間開箱即用，我需要導入GH頁面上提到的CSS。在react_on_rails應用程序中導入.css時Webpack加載器失敗？

在我的應用程序，我複製/粘貼CSS到一個文件中我命名爲DateTime.css：

... 
import DateTime from 'react-datetime'; 
import '../../schedules/stylesheets/DateTime.css'; 
... 

export default class AddDate extends React.Component {

但它給我這個錯誤：

VM45976:1 Uncaught Error: Module parse failed: /Users/some/path/to/my/project/App/components/schedules/stylesheets/DateTime.css Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 
| .rdt { 
| position: relative; 
| }

這似乎是CSS加載程序不加工。我試過這個純粹的反應應用程序（create-react-app），它的工作。當我在react_on_rails裏面做的時候它就破了。

這是我的WebPack配置ATM（標準外的現成react_on_rails）：

const webpack = require('webpack'); 
const { resolve } = require('path'); 

const ManifestPlugin = require('webpack-manifest-plugin'); 
const webpackConfigLoader = require('react-on-rails/webpackConfigLoader'); 

const configPath = resolve('..', 'config'); 
const { devBuild, manifest, webpackOutputPath, webpackPublicOutputDir } = 
    webpackConfigLoader(configPath); 

const config = { 

    context: resolve(__dirname), 

    entry: { 
    'webpack-bundle': [ 
     'es5-shim/es5-shim', 
     'es5-shim/es5-sham', 
     'babel-polyfill', 
     './app/bundles/App/startup/registration', 
    ], 
    }, 

    output: { 
    // Name comes from the entry section. 
    filename: '[name]-[hash].js', 

    // Leading slash is necessary 
    publicPath: `/${webpackPublicOutputDir}`, 
    path: webpackOutputPath, 
    }, 

    resolve: { 
    extensions: ['.js', '.jsx'], 
    }, 

    plugins: [ 
    new webpack.EnvironmentPlugin({ 
     NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined 
     DEBUG: false, 
    }), 
    new ManifestPlugin({ fileName: manifest, writeToFileEmit: true }), 
    ], 

    module: { 
    rules: [ 
     { 
     test: require.resolve('react'), 
     use: { 
      loader: 'imports-loader', 
      options: { 
      shim: 'es5-shim/es5-shim', 
      sham: 'es5-shim/es5-sham', 
      }, 
     }, 
     }, 


    { 
     test: /\.jsx?$/, 
     use: 'babel-loader', 
     exclude: /node_modules/, 
     }, 
     { 
     test: /\.css$/, 
     use: 'css-loader', 
     exclude: /node_modules/, 
     }, 
    ], 
     ], 
     }, 
    }; 

module.exports = config; 

if (devBuild) { 
    console.log('Webpack dev build for Rails'); // eslint-disable-line no-console 
    module.exports.devtool = 'eval-source-map'; 
} else { 
    console.log('Webpack production build for Rails'); // eslint-disable-line no-console 
}

我很新的的WebPack，以及不知道如何，我可以添加裝載機，使其工作，我怎麼能申請DateTime.css文件，我必須適用於react-datetime？

編輯：增加了css-loader（同時更新了上面的webpack）。它不再抱怨我沒有正確的加載器，但CSS不起作用。

{ 
    test: /\.jsx?$/, 
    use: 'babel-loader', 
    exclude: /node_modules/, 
    }, 
    { 
    test: /\.css$/, 
    use: 'css-loader', 
    exclude: /node_modules/, 
    }, 
],

來源

2017-06-09 Iggy

你的配置中沒有'css-loader'。看一看[css-loader docs]（https://github.com/webpack-contrib/css-loader），你就可以立即開始運行。另外，如果你想提取CSS到一個單獨的文件，你將需要[ExtractTextPlugin]（https://github.com/webpack-contrib/extract-text-webpack-plugin） –

@PavelDenisjuk，感謝堡rec！我安裝了'css-loader'，並且錯誤消息停止了。但是它仍然沒有顯示CSS。任何想法爲什麼會發生？ – Iggy

有兩種概念上不同的方法來解決這個問題。

1.使用CSS模塊。通過這種方式，您的CSS將最終與您的JS捆綁在一起，一旦webpack加載該JS模塊/捆綁包，它會自動將CSS樣式元素添加到頭部。在我的項目我有這樣的規則來完成這一功能（注意，我們使用兩種css-loader和style-loader）：

{ 
    test: /\.css$/, 
    use: ['style-loader', { 
     loader: 'css-loader', 
     options: { 
      modules: true, 
      localIdentName: '[path][name]__[local]--[hash:base64:5]' 
     } 
    }] 
}

更多關於CSS-裝載機modulesat this link。

2.使用ExtractTextPlugin。這樣所有的CSS將被提取到一個單獨的文件中。配置需要兩兩件事：

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
// Add this to your webpack plugins array 
new ExtractTextPlugin('styles.css')

並添加到您的規則：由插件創建插件和裝載機配置

{ 
    test: /\.css$/, 
    exclude: /node_modules/, 
    use: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: ['css-loader'] 
    }) 
}

這將創建一個單一的styles.css文件，並把所有的CSS你進口從JS到那個文件。

來源

2017-06-11 13:44:25

在react_on_rails應用程序中導入.css時Webpack加載器失敗？

回答

相關問題