2017-09-26 85 views
0

我有以下的WebPack文件,但是,当我运行NPM运行开发没有得到所产生的name.bundle.css文件:(没有错误或者)的WebPack不会产生app.bundle.css

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

module.exports = { 
    context: path.resolve(__dirname, './resources/'), 
    entry: { 
     app: './index.jsx' 
    }, 
    output: { 
     filename: '[name].bundle.js', 
     path: path.resolve(__dirname, './public/assets/'), 
     publicPath: '/assets/' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.css$/, 
       use: ExtractTextPlugin.extract({ 
        use: [{ 
         loader: 'css-loader' 
        }], 
       }), 
      }, 
      { 
       test: /\.jsx|js$/, 
       exclude: [/node-modules/], 
       use: [ 
       { 
        loader: "babel-loader", 
        options: { presets: ['react', 'es2015', 'stage-1'] } 
       } 
       ] 
      }, 
      { 
       test: /\.(sass|scss)$/, 
       use: ["style-loader", "css-loader", "sass-loader"] 
      }, 
      { 
       test: /\.(jpe?g|png|gif|svg)$/i, 
       use: ['file-loader?name=[name].[ext]'] 
      }, 
      { 
       test: /\.(eot|svg|ttf|woff|woff2)$/, 
       loader: 'file-loader?name=public/fonts/[name].[ext]' 
      } 
     ] 
    }, 
    resolve: { 
     modules: [ 
      path.resolve(__dirname, './resources/'), 
      'node_modules' 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'common' 
     }), 
     new ExtractTextPlugin({ 
      filename: '[name].bundle.css' 
     }) 
    ] 
} 

我的CSS文件夹是:

CSS 
    - app.scss 
    COMPONENTS 
     comp1.scss 
     comp2.scss 

是这样工作的 “从” ./css/app.scss'导入样式;”但我希望这会产生一个app.bundle.css:

new ExtractTextPlugin({ 
     filename: '[name].bundle.css' 
    }) 

回答

0

你对css和sass都有2条规则。

我觉得你的情况,你只需要一个:

test: /\.(sass|scss)$/, 
use: ExtractTextPlugin.extract({ 
    use: [{ 
     loader: "css-loader" 
    }, { 
     loader: "sass-loader" 
    }], 
    fallback: "style-loader" 
}) 

和像你说的,你应该导入在js文件的SCSS文件import './css/app.scss'