Question

我刚刚开始了解webpack2，我正在尝试在webpackconfiguration中使用scss加载器，这是modules.rules数组的一部分（我google了一下因为我无法从webpackhomepage找到它怎么做）：

{
        test: /\.scss$/,
        loader:   ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
}

当我运行webpack-dev-server时，它会成功编译，但应用程序不会显示任何内容，而（chrome）控制台会返回此错误：

Uncaught Error: [HMR] Hot Module Replacement is disabled.
    at eval (webpack:///../~/webpack/hot/dev-server.js?:51)
    at Object.<anonymous> (vendor.bundle.js:475)
    at __webpack_require__ (vendor.bundle.js:20)
    at eval (webpack:///multi_../~/webpack-dev-server/client?:2)
    at Object.<anonymous> (vendor.bundle.js:1225)
    at __webpack_require__ (vendor.bundle.js:20)
    at vendor.bundle.js:66
    at vendor.bundle.js:69

如何在我的webpack2应用程序中运行scssfile？链接到code

Answer 1

您在该配置中缺少sass-loader。有关说明，请参阅其自述文件。

Answer 2

首先安装sass-loader

npm install --save sass-loader

然后将其添加到您的webpack以加载.scss文件类型

e.g

    {
        test    : /\.scss?$/,
        loader  : ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader"),
        include : path.join(__dirname, 'sass')
    }

Answer 3

试试这个 - ＆gt;

>       {
>         test: /\.scss$/,
>         loader: ExtractTextPlugin.extract( "css-loader?sourceMap!postcss-loader!sass-loader?sourceMap")
>       },

如何在reactjs应用程序中使用scss文件？

3 个答案: