Css未装入webpack

Question

我无法使用webpack加载我的样式 - 我有几个.scss文件，webpack应该将它们编译为.css文件并生成JS输出文件。该文件生成正确，但.css文件只是不存在。有什么可以不对我的配置？：

const ExtractTextPlugin = require('extract-text-webpack-plugin') 
const path = require('path') 

const DIST_DIR = path.resolve(__dirname, 'dist'); 
const APP_DIR = path.resolve(__dirname, 'src'); 

const sassLoaders = [ 
    'css-loader', 
    'sass-loader?indentedSyntax=sass&includePaths[]=' + DIST_DIR 
] 

const config = { 
    entry: { 
     app: [APP_DIR + '/index.js'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx$/, 
       include: APP_DIR, 
       loaders: ['babel'] 
      }, 
      { 
       test: /\.scss$/, 
       include: DIST_DIR, 
       loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!')) 
      } 
     ] 
    }, 
    output: { 
     filename: 'js/bundle.js', 
     path: DIST_DIR 
    }, 
    plugins: [ 
     new ExtractTextPlugin('[name].css') 
    ], 
    resolve: { 
     extensions: ['', '.js', '.scss'], 
     root: [APP_DIR] 
    } 
} 

module.exports = config 

文件结构：

dist 
- css 
    - style.scss 
- js 
src 
- index.js 

Answer 1

试着改变你的模块装载机为您SCSS文件：

{ test: /\.s[ac]ss(\?|$)/, loaders: ['style', 'css', 'sass'] }