Question

我正在尝试使用sass-loader将SCSS文件转换为css（需要具有物理文件）。样式正在应用但无法查看生成的.css文件。

//webpack.config.js

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

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: __dirname + '/public'
    },
    module: {
      loaders: [
          {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
          {test: /\.scss$/, loader: ExtractTextPlugin.extract('css-loader!sass-loader')}
      ]
    },
    plugins: [
       new ExtractTextPlugin("style.css")
   ]
}

github repo

提供完整的源代码

Answer 1

我已经看过源代码了。我确定是因为您仍在使用webpack version 1语法，但您安装的是webpack v2。 Webpack2具有与先前版本不同的语法。

使用webpack v2您的webpack.config.js将如下所示：

module: {
        rules: [ // from 'loaders' to 'rules'
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.sass$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract({
                  fallbackLoader: 'style-loader',
                  loader: ['style-loader','sass-loader']
                })
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin('bundle.css') // what the output file (css) is going to be
    ]

希望这有帮助。

无法生成CSS文件sass-loader webpack

1 个答案: