2017-03-06 38 views
1

我想讓webpack編譯和提供scss文件。不幸的是,無論我做什麼以及更改* .scss文件都未被解析。 webpack完成的唯一事情就是生成一個bundle.js文件,它可以提供所有js內容。我不確定這個配置有什麼問題。Webpack2不解析sass文件

let path = require("path"); 
let webpack = require('webpack'); 

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

const extractCSS = new ExtractTextPlugin("styles.css"); 

module.exports = { 
    devtool: 'inline-source-map', 
    entry: [ 
    './src/index.js', 

    ], 
    resolve: { 
    modules: [ 
     "src", 
     'node_modules' 
    ], 
    extensions: ['.js', '.jsx', '.scss'] 
    }, 
    output: { 
    path: path.resolve(__dirname, "build"), 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     use: [ 
      'react-hot-loader', 
      'babel-loader?presets[]=react,presets[]=es2015', 
     ] 
     }, 
     { 
     test: /\.scss$/, 
     include: path.join(__dirname, 'app', 'scss'), 
     use: extractCSS.extract({ 
      fallback: 'style-loader', 
      use: [ 
      'css-loader', 
      'sass-loader?outputStyle=expanded' 
      ] 
     }) 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 
    extractCSS 
    ], 
}; 

有了以下的源代碼樹:

ROOT 
    /build 
    /src 
    /scss 
    index.js 
    webpack.config.js 
    packages.json 
+2

您是否在您的js代碼中導入/要求所有主入口scss文件?如果不這樣做。 Webpack只測試導入的/必需的文件。 – cyrix

回答

1

你.scss文件有一個入口點,或者通過被導入/像一個單獨的文件中index.js要求或(更好的)以某種方式進入低谷index.scss