Javascript Webpack只生成JS，没有来自SCS的CSS文件

在我的项目中，我使用带有React和NodeJS的Webpack。我想生成一个

bundle.js

和

style.css

文件。目前我有以下代码：

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

module.exports = {
  entry: './index.js',

  output: {
    path: 'public',
    filename: 'bundle.js',
    publicPath: ''
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      },
      { test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') }
    ]
  },

  plugins: [
    new ExtractTextPlugin('public/style.css')
  ]
}

但是当我运行

webpack

时，在

/public

映射中只创建JS文件：

    Asset    Size  Chunks             Chunk Names
bundle.js  844 kB       0  [emitted]  main
    + 222 hidden modules

下面的示例/教程只针对CSS文件，或者犯了一些明显的错误，比如没有实现ExtractText。 我还下载了包

sass加载程序节点sass

。在一些例子中，我确实找到了那些包含的包，但在一些例子中，它们没有

编辑（需要index.js中的样式）：

import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'

import routes from './modules/routes'

require('./public/style.css')

render(
    <Router routes={routes} history={browserHistory} />,
    document.getElementById('app')
)

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      },
      {
        test      : /\.scss$/,
        include   : path.join(__dirname, './public/sass'),
        loaders   : ["style", "css", "sass"]
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css!sass')
      }
    ]
  },

  sassLoader: {
    includePaths: [path.join(__dirname, './public/sass')]
  },

  plugins: [
    new ExtractTextPlugin(path.join(__dirname, './public/style.css'))
  ]

我的文件夹结构如下所示：

webpack.config.js
index.js

/public
    index.html
    bundle.js (generated)

    /sass
        style.scss
        basics.scss (imported in style.scss)

---

确保您需要样式文件。 e、 g

我认为你也需要样式加载器 e、 g

这三台装载机执行以下操作

使用sass加载程序将

scss

文件转换为普通的

CSS

借助CSS加载器

使用样式加载器将这些样式插入页面

---

确保您需要样式文件。 e、 g

我认为你也需要样式加载器 e、 g

这三台装载机执行以下操作

使用sass加载程序将

scss

文件转换为普通的

CSS

借助CSS加载器

使用样式加载器将这些样式插入页面

---

您需要ExtractTextPlugin和样式加载器的组合

module: {
  loaders: [
      { 
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'),
      },
  ],
}

...

plugins: [
  new ExtractTextPlugin(path.join(__dirname, 'public', 'style.css')), 
],

在我的工作配置中，我在resolve中还有一个可能无关的条目：

resolve: {
  loaders: [
    {
      test: /\.(css|scss)$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
    },
  ],
},

---

另一个错误可能是如何将其包含在

index.js

中。您使用的是

require（'./public/style.css'）

而不是

require（'./public/style.scss'）

您需要ExtractTextPlugin和样式加载器的组合

module: {
  loaders: [
      { 
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'),
      },
  ],
}

...

plugins: [
  new ExtractTextPlugin(path.join(__dirname, 'public', 'style.css')), 
],

在我的工作配置中，我在resolve中还有一个可能无关的条目：

resolve: {
  loaders: [
    {
      test: /\.(css|scss)$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
    },
  ],
},

---

另一个错误可能是如何将其包含在

index.js

中。您使用的是

require（'./public/style.css'）

而不是

require（'./public/style.scss'）

谢谢您的回复。我确实将加载程序添加到了我的代码中（在提取加载程序的上方），并且在我的条目index.js中需要css文件（请参阅我编辑的代码）。我还添加了sassLoader。。尽管它仍然不起作用。运行webpack时，我遇到以下错误：

未找到index.js模块中的错误：错误：无法解析“文件”或“目录”。/public/style.css

。我不知道我做错了什么？！您需要的文件错误：require

/public/style.scss

而不是

/public/style.css

；您使用的是sass加载程序而不是css加载程序。谢谢您的回复。我确实将加载程序添加到了我的代码中（在提取加载程序的上方），并且在我的条目index.js中需要css文件（请参阅我编辑的代码）。我还添加了sassLoader。。尽管它仍然不起作用。运行webpack时，我遇到以下错误：

未找到index.js模块中的错误：错误：无法解析“文件”或“目录”。/public/style.css

。我不知道我做错了什么？！您需要的文件错误：require

/public/style.scss

而不是

/public/style.css

；您使用的是sass加载程序，而不是css加载程序。