2016-09-19 73 views
0

目前,我一直在讓Sass在我的React項目中工作。在指南中,我遵循一切工作正常,但只要我需要在我的webpack.config.js中使用ExtractTextPlugin,就會引發錯誤。我的主要SASS文件位於root/style.main.scss幷包含在我的index.js它使我的應用程序在DOM這樣的:import style from '../style/main.scss';使用sass loader的錯誤webpack

webpack.config.js:

module.exports = { 
    entry: './src/index.js', 
    output: { 
    path: __dirname, 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: [ 
      'es2015', 
      'react' 
      ] 
     } 
     }, 
     { test: /\.css$/, exclude: /\.useable\.css$/, loader: "style!css" }, 
     { test: /\.useable\.css$/, loader: "style/useable!css" }, 
     // sass 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('css!sass') 
     } 
    ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('public/style.css', { 
      allChunks: true 
     }) 
    ], 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    proxy: { 
     '/api/*': { 
     target: 'http://mab-cmdb.dev', 
     secure: false, 
     changeOrigin: true 
     } 
    } 
    }, 
}; 

編輯:的WebPack錯誤

/Users/jordykoppen/git/mab-cmdb-v2-frontend/webpack.config.js:25 
     loader: ExtractTextPlugin.extract('css!sass') 
       ^

ReferenceError: ExtractTextPlugin is not defined 
    at Object.<anonymous> (/Users/jordykoppen/git/mab-cmdb-v2-frontend/webpack.config.js:25:17) 
    at Module._compile (module.js:409:26) 
    at Object.Module._extensions..js (module.js:416:10) 
    at Module.load (module.js:343:32) 
    at Function.Module._load (module.js:300:12) 
    at Module.require (module.js:353:17) 
    at require (internal/module.js:12:17) 
    at module.exports (/usr/local/lib/node_modules/webpack-dev-server/node_modules/webpack/bin/convert-argv.js:80:13) 
    at Object.<anonymous> (/usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js:62:48) 
    at Module._compile (module.js:409:26) 

感謝您的幫助。

+0

調試日誌不是非常有用,因爲它不包含您得到的實際錯誤。您可以手動啓動WDS並將錯誤添加到您的問題中嗎? 'webpack-dev-server --progress --colors --inline' – robertklep

+0

@robertklep對不起,我編輯了我的問題。 –

回答

1

你的WebPack配置缺少以下行:

var ExtractTextPlugin = require("extract-text-webpack-plugin"); 

the documentation

+0

這樣做,感謝您的幫助! –

相關問題