在 react_on_rails 应用程序中导入 .css 时 Webpack 加载程序失败?
Webpack loader fails when importing .css in react_on_rails app?
我正在尝试使用他们的 GH 页面上提到的 react-datetime
on my react-on-rails
app. To make the datetime work out of the box, I need to import the CSS。
在我的应用程序中,我 copy/paste 将 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 加载程序无法正常工作。我在纯 React 应用程序 (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 的新手,不确定如何添加加载程序以使其工作,如何应用必须应用到 react-datetime
的 DateTime.css
文件?
编辑: 添加了 css-loader(也更新了上面的 webpack)。它不再抱怨我没有正确的加载程序,但是 CSS 不起作用。
{
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: 'css-loader',
exclude: /node_modules/,
},
],
有两种概念上不同的方法来解决这个问题。
1.使用 CSS 个模块。
这样你的 CSS 将最终与你的 JS 捆绑在一起,一旦 webpack 加载该 JS module/bundle 它会自动将 CSS 样式元素附加到头部。
在我的项目中,我有这个规则来做到这一点(注意我们同时使用 css-loader
和 style-loader
):
{
test: /\.css$/,
use: ['style-loader', {
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}]
}
更多关于 css-loader modules
at 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
文件,并将您从 JS 导入的所有 CSS 放入该文件。
我正在尝试使用他们的 GH 页面上提到的 react-datetime
on my react-on-rails
app. To make the datetime work out of the box, I need to import the CSS。
在我的应用程序中,我 copy/paste 将 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 加载程序无法正常工作。我在纯 React 应用程序 (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 的新手,不确定如何添加加载程序以使其工作,如何应用必须应用到 react-datetime
的 DateTime.css
文件?
编辑: 添加了 css-loader(也更新了上面的 webpack)。它不再抱怨我没有正确的加载程序,但是 CSS 不起作用。
{
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: 'css-loader',
exclude: /node_modules/,
},
],
有两种概念上不同的方法来解决这个问题。
1.使用 CSS 个模块。
这样你的 CSS 将最终与你的 JS 捆绑在一起,一旦 webpack 加载该 JS module/bundle 它会自动将 CSS 样式元素附加到头部。
在我的项目中,我有这个规则来做到这一点(注意我们同时使用 css-loader
和 style-loader
):
{
test: /\.css$/,
use: ['style-loader', {
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}]
}
更多关于 css-loader modules
at 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
文件,并将您从 JS 导入的所有 CSS 放入该文件。