Reactjs 排除网页包失败中的CSS路径

config/webpack.dev.config.js:

/**
 * module dependencies for webpack dev configuration
 */
const path = require('path');
const webpack = require('webpack');

// define paths
const nodeModulesPath = path.resolve(__dirname, '../node_modules');
const buildPath = path.resolve(__dirname, '../public', 'build');
const mainAppPath = path.resolve(__dirname, '../frontend', 'App', 'index.js');
const sharedStylesPath = path.resolve(__dirname, '../frontend', 'SharedStyles');
const componentsPath = path.resolve(__dirname, '../frontend', 'Components');
const containersPath = path.resolve(__dirname, '../frontend', 'Containers');
const viewsPath = path.resolve(__dirname, '../frontend', 'Views');

const editorPath = path.resolve(__dirname, '../frontend/Components/MyEditor');

/**
 * webpack development configuration
 */
module.exports = {
  target  : 'web',
  devtool: 'inline-source-map',

  entry: [
    'webpack-hot-middleware/client',
    mainAppPath,
  ],

  output: {
    filename: 'bundle.js',
    path: buildPath,
    publicPath: '/build/',
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'react-hot', 'babel-loader' ],
        exclude: [nodeModulesPath],
      },
      {
        test: /\.css$/,
        exclude: [editorPath],
        loaders: [
          'style-loader',
          'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss-loader?sourceMap=inline',
        ],
      },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
      { test: /\.svg$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
    ],
  },

  postcss: [ require('autoprefixer'), require('postcss-nesting') ],

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
  ],

  resolve : {
    extensions: ['', '.js', '.css'],
    alias: {
      SharedStyles: sharedStylesPath,
      Components: componentsPath,
      Containers: containersPath,
      Views: viewsPath,
    },
  },
};

import React, { Component } from 'react';

import { Editor } from 'react-draft-wysiwyg';
import './editor.css'; // this cause an error because global CSS doesn't work by webpack

class MyEditor extends Component {
    render() {
        return (
            <div>
           <Editor />
            </div>
        );
    }
}

export default MyEditor;

ERROR in ./frontend/Components/MyEditor/editor.css
Module parse failed: /home/mycomputer/ReForum/frontend/Components/MyEditor/editor.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/home/mycomputer/ReForum/node_modules/webpack/lib/Parser.js:902:15)
    at NormalModule.<anonymous> (/home/mycomputer/ReForum/node_modules/webpack/lib/NormalModule.js:104:16)
    at NormalModule.onModuleBuild (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.provide (/home/mycomputer/ReForum/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:52:20)
    at CachedInputFileSystem.readFile (/home/mycomputer/ReForum/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:140:24)
    at NormalModule.onLoadPitchDone (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:255:7)
    at NormalModule.loadPitch (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:182:27)
 @ ./frontend/Components/MyEditor/index.js 17:0-23
webpack: Failed to compile.

frontend/Components/MyEditor/index.js:

/**
 * module dependencies for webpack dev configuration
 */
const path = require('path');
const webpack = require('webpack');

// define paths
const nodeModulesPath = path.resolve(__dirname, '../node_modules');
const buildPath = path.resolve(__dirname, '../public', 'build');
const mainAppPath = path.resolve(__dirname, '../frontend', 'App', 'index.js');
const sharedStylesPath = path.resolve(__dirname, '../frontend', 'SharedStyles');
const componentsPath = path.resolve(__dirname, '../frontend', 'Components');
const containersPath = path.resolve(__dirname, '../frontend', 'Containers');
const viewsPath = path.resolve(__dirname, '../frontend', 'Views');

const editorPath = path.resolve(__dirname, '../frontend/Components/MyEditor');

/**
 * webpack development configuration
 */
module.exports = {
  target  : 'web',
  devtool: 'inline-source-map',

  entry: [
    'webpack-hot-middleware/client',
    mainAppPath,
  ],

  output: {
    filename: 'bundle.js',
    path: buildPath,
    publicPath: '/build/',
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'react-hot', 'babel-loader' ],
        exclude: [nodeModulesPath],
      },
      {
        test: /\.css$/,
        exclude: [editorPath],
        loaders: [
          'style-loader',
          'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss-loader?sourceMap=inline',
        ],
      },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
      { test: /\.svg$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
    ],
  },

  postcss: [ require('autoprefixer'), require('postcss-nesting') ],

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
  ],

  resolve : {
    extensions: ['', '.js', '.css'],
    alias: {
      SharedStyles: sharedStylesPath,
      Components: componentsPath,
      Containers: containersPath,
      Views: viewsPath,
    },
  },
};

import React, { Component } from 'react';

import { Editor } from 'react-draft-wysiwyg';
import './editor.css'; // this cause an error because global CSS doesn't work by webpack

class MyEditor extends Component {
    render() {
        return (
            <div>
           <Editor />
            </div>
        );
    }
}

export default MyEditor;

ERROR in ./frontend/Components/MyEditor/editor.css
Module parse failed: /home/mycomputer/ReForum/frontend/Components/MyEditor/editor.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/home/mycomputer/ReForum/node_modules/webpack/lib/Parser.js:902:15)
    at NormalModule.<anonymous> (/home/mycomputer/ReForum/node_modules/webpack/lib/NormalModule.js:104:16)
    at NormalModule.onModuleBuild (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.provide (/home/mycomputer/ReForum/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:52:20)
    at CachedInputFileSystem.readFile (/home/mycomputer/ReForum/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:140:24)
    at NormalModule.onLoadPitchDone (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:255:7)
    at NormalModule.loadPitch (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:182:27)
 @ ./frontend/Components/MyEditor/index.js 17:0-23
webpack: Failed to compile.

import React，{Component}来自'React'；
从“react draft wysiwyg”导入{Editor}；
导入“./editor.css”；//这会导致一个错误，因为全局CSS不适用于webpack
类MyEditor扩展组件{
render（）{
返回(
);
}
}
导出默认MyEditor；

错误：

/**
 * module dependencies for webpack dev configuration
 */
const path = require('path');
const webpack = require('webpack');

// define paths
const nodeModulesPath = path.resolve(__dirname, '../node_modules');
const buildPath = path.resolve(__dirname, '../public', 'build');
const mainAppPath = path.resolve(__dirname, '../frontend', 'App', 'index.js');
const sharedStylesPath = path.resolve(__dirname, '../frontend', 'SharedStyles');
const componentsPath = path.resolve(__dirname, '../frontend', 'Components');
const containersPath = path.resolve(__dirname, '../frontend', 'Containers');
const viewsPath = path.resolve(__dirname, '../frontend', 'Views');

const editorPath = path.resolve(__dirname, '../frontend/Components/MyEditor');

/**
 * webpack development configuration
 */
module.exports = {
  target  : 'web',
  devtool: 'inline-source-map',

  entry: [
    'webpack-hot-middleware/client',
    mainAppPath,
  ],

  output: {
    filename: 'bundle.js',
    path: buildPath,
    publicPath: '/build/',
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'react-hot', 'babel-loader' ],
        exclude: [nodeModulesPath],
      },
      {
        test: /\.css$/,
        exclude: [editorPath],
        loaders: [
          'style-loader',
          'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss-loader?sourceMap=inline',
        ],
      },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
      { test: /\.svg$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
    ],
  },

  postcss: [ require('autoprefixer'), require('postcss-nesting') ],

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
  ],

  resolve : {
    extensions: ['', '.js', '.css'],
    alias: {
      SharedStyles: sharedStylesPath,
      Components: componentsPath,
      Containers: containersPath,
      Views: viewsPath,
    },
  },
};

import React, { Component } from 'react';

import { Editor } from 'react-draft-wysiwyg';
import './editor.css'; // this cause an error because global CSS doesn't work by webpack

class MyEditor extends Component {
    render() {
        return (
            <div>
           <Editor />
            </div>
        );
    }
}

export default MyEditor;

ERROR in ./frontend/Components/MyEditor/editor.css
Module parse failed: /home/mycomputer/ReForum/frontend/Components/MyEditor/editor.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/home/mycomputer/ReForum/node_modules/webpack/lib/Parser.js:902:15)
    at NormalModule.<anonymous> (/home/mycomputer/ReForum/node_modules/webpack/lib/NormalModule.js:104:16)
    at NormalModule.onModuleBuild (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.provide (/home/mycomputer/ReForum/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:52:20)
    at CachedInputFileSystem.readFile (/home/mycomputer/ReForum/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:140:24)
    at NormalModule.onLoadPitchDone (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:255:7)
    at NormalModule.loadPitch (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:182:27)
 @ ./frontend/Components/MyEditor/index.js 17:0-23
webpack: Failed to compile.

./frontend/Components/MyEditor/editor.css中的

错误
模块解析失败：/home/mycomputer/ReForum/frontend/Components/MyEditor/editor.css意外令牌（1:0）
您可能需要适当的加载程序来处理此文件类型。
SyntaxError:意外标记（1:0）
在Parser.pp$4.raise（/home/mycomputer/refrum/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15）
在Parser.pp.unexpected（/home/mycomputer/refrum/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10）
在Parser.pp$3.parsexpratom（/home/mycomputer/refrum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12）
在Parser.pp$3.parsexprsubscripts（/home/mycomputer/refrom/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21）
在Parser.pp$3.parsemaybeanary（/home/mycomputer/refrum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19）
在Parser.pp$3.parsexprops（/home/mycomputer/refrum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21）
在Parser.pp$3.parseMaybeConditional（/home/mycomputer/reform/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21）
在Parser.pp$3.parseMaybeAssign（/home/mycomputer/refrum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21）
在Parser.pp$3.parseExpression（/home/mycomputer/refrum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21）
在Parser.pp$1.parseStatement（/home/mycomputer/refrum/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47）
Parser.pp$1.parseTopLevel（/home/mycomputer/refrum/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25）
在Parser.parse（/home/mycomputer/refrum/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17）
在Object.parse（/home/mycomputer/refrum/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39）
在Parser.parse（/home/mycomputer/refrum/node_modules/webpack/lib/Parser.js:902:15）
在正常模块。（/home/mycomputer/ReForum/node_modules/webpack/lib/NormalModule.js:104:16）
在NormalModule.onModuleBuild（/home/mycomputer/refrum/node_modules/webpack core/lib/NormalModuleMixin.js:310:10）
在nextLoader（/home/mycomputer/refrum/node_modules/webpack core/lib/NormalModuleMixin.js:275:25）
at/home/mycomputer/ReForum/node_modules/webpack core/lib/NormalModuleMixin.js:259:5
在Storage.provide（/home/mycomputer/refrum/node_modules/enhanced resolve/lib/CachedInputFileSystem.js:52:20）
在CachedInputFileSystem.readFile（/home/mycomputer/refrom/node_modules/enhanced resolve/lib/CachedInputFileSystem.js:140:24）
在NormalModule.onLoadPitchDone（/home/mycomputer/reform/node_modules/webpack core/lib/NormalModuleMixin.js:255:7）
在NormalModule.loadPitch（/home/mycomputer/ReForum/node_modules/webpack core/lib/NormalModuleMixin.js:182:27）
@./frontend/Components/MyEditor/index.js 17:0-23
网页包：未能编译。

我尝试从WebpackCSS加载程序中排除

“frontend/Components/MyEditor/editor.css”

文件，以便通过将

“import./editor.css”；“

放在任何js文件中来应用全局css

但目前它会导致模块解析失败的错误

在网页包配置中，我放置了

“exclude:[editorPath]”和“const editorPath=path.resolve（uu dirname，../frontend/Components/MyEditor”）；“

---

所以我认为它是正确的，但它不起作用。如何修复此问题？

因为您已将css文件从css加载程序中排除。所以网页包不知道该如何处理该文件。您需要为该文件编写一个新的模块加载器

 module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'react-hot', 'babel-loader' ],
        exclude: [nodeModulesPath],
      },
      {
        test: /\.css$/,
        exclude: [editorPath],
        loaders: [
          'style-loader',
          'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss-loader?sourceMap=inline',
        ],
      },
      {
        test: /\.css$/,
        include: [editorPath],
        loaders: [
          'css-loader',
        ],
      },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
      { test: /\.svg$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
    ],
  },

---

对不起，我不明白。你能再给我一点小费吗？抱歉，对于普通css文件，您使用此加载程序

css加载程序？modules&importLoaders=1&localIdentName=[name]\uuuuu[local]\uuuuuu[hash:base64:5]

，因此您的普通css文件中的css名称将被编译为一些名称，如

[name]\uuuuuu[local]\uuuuu[hash:base64:5]

您需要编写新的模块加载程序来加载css，而不更改css名称。