2016-03-22 15 views
4

私はopensourceプロジェクトに取り組んでいます。今はフロントエンド用にwebpackをセットアップする必要があります。私は以下のwebpack設定を試してみましたが、JSはうまく動作しますが、CSSはCSSの出力ファイルではありません。私はなぜこれが起こるか分からない、助けてください。webpack css loader not work:出力されないCSSファイル

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

const node_dir = __dirname + '/node_modules'; 

const sassLoaders = [ 
    'css-loader', 
    'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, './public/stylesheets/') 
] 

const config = { 
    addVendor: function (name, path) { 
     this.resolve.alias[name] = path; 
     this.module.noParse.push(new RegExp('^' + name + '$')); 
    }, 

    entry: { 
     app: './public/javascripts/app.js', 
    vendors: ['jquery','underscore'] 
    }, 

    output: { 
     path: path.join(__dirname, process.env.NODE_ENV === 'production' ? './public/dist' : './public/dev'), 
     filename: process.env.NODE_ENV === 'production' ? '[name].[hash].js' : '[name].js', 
     publicPath: 'public/dev' 
    }, 

    module:{ 
     noParse: [], 
     loaders:[ 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!')) 
      }, 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader:'babel?presets[]=es2015' 
      } 
     ] 
    }, 

    resolve: { 
     alias: {}, 
     extensions: ['', '.js', '.scss'], 
    }, 

    plugins: [ 
     new webpack.NoErrorsPlugin(), 
     new ExtractTextPlugin("qor.css", { 
      allChunks: true 
     }), 
     new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.bundle.js'), 
     new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery", 
      "window.jQuery": "jquery" 
     }), 
     new webpack.ProvidePlugin({ 
      _: "underscore", 
     }) 
    ] 
}; 

config.addVendor('jquery', node_dir + '/jquery/dist/jquery.js'); 
config.addVendor('underscore', node_dir + '/underscore/underscore.js'); 

module.exports = config; 

私はwebpack -d --watch --progress --colorsの実行時にCSSファイル出力がない:以下

は私のWebPACKの設定のjsファイルです。ちょうどjsファイル。ここ

enter image description here

私のプロジェクトフォルダ

enter image description here

答えて

6

はあなたが必要と使用してjsのエントリポイントで、あなたのスタイルシートを必要とすることを忘れなかったです:あなたがしたい場合は

// in your modules just require the stylesheet 
// This has the side effect that a <style>-tag is added to the DOM. 
require("./stylesheet.css"); 

ネイティブCSSの出力ファイルを生成するには、this guide from webpack documentationをチェックしてください。

関連する問題