Question

我无法弄清楚如何使用webpack sass-loader渲染css文件。

这是我的webpackconfig.js的样子：

module.exports = {
  context: __dirname + "/app",
  entry: {
    javascript: "./app.js",
    html: "./index.html"
  },


  output: {
    filename: "app.js",
    path: __dirname + "/dist"
  },


  module: {
    loaders: [
      //JAVASCRIPT
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"],
      },

      //Index HMTML
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      },
      //Hotloader
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["react-hot", "babel-loader"],
      },

      // SASS
      {
        test: /\.scss$/,
        loader: 'style!css!sass'
      }

    ],
  }

}

正如您所看到的，我正在使用文档中指定的sass-loader模块加载器。

  {
    test: /\.scss$/,
    loader: 'style!css!sass'
  }

我的根看起来像这样：

Project Root:
  app:
    style.scss
  dist:
   ?????? WTF is my css file??
  webpack.config.js

我可以使用其他所有工作，例如html和jsx babble加载器。我只需在命令行中键入webpack即可。

我在使用sass loader做错了。它是什么？请帮忙。

Answer 1

使用TypeScript并遇到类似的问题，我发现'scss'文件导入应该在Webpack开始的索引文件中。

在index.ts中导入，而不是在内部模块中导入。

webpack sass-loader没有生成css文件

1 个答案: