Question

我目前有一些反应组件和用webpack成功构建的sass。我还有一个主要的sass文件，它使用gulp任务构建到css。

我只想使用其中一种技术，是否可以将sass编译为css，而无需在条目文件中对sass进行相关的需求？

以下是尝试使用WebpackExtractTextPlugin

的示例

webpack.config.js

entry_object[build_css + "style.css"] = static_scss + "style.scss";
module.exports = {
  entry: entry_object,
  output: {
    path: './',
    filename: '[name]'
  },
{
  test: /\.scss$/,
  include: /.scss$/,
  loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}
  plugins: [
    new ExtractTextPlugin("[name]")
  ]

运行webpack后，style.css资产如下所示：

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {

...

Answer 1

我在@bebraw

的帮助下解决了这个问题

正如他在评论中所述，当使用ExtractTextPlugin时，webpack将创建一个虚拟javascript文件，然后是output.filename中的模式。因为我将ExtractTextPlugin的输出文件设置为与output.filename中的名称完全相同，所以它只输出了javascript文件。通过确保output.filename和ExtractTextPlugin输出文件名的名称不同，我能够将我的sass加载到css中。

这是webpack.config.js的最后一个例子

entry_object[build_css + "style"] = static_scss + "style.scss";
module.exports = {
  entry: entry_object,
  output: {
    path: './',
    filename: '[name]'
  },
{
  test: /\.scss$/,
  include: /.scss$/,
  loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}
  plugins: [
    new ExtractTextPlugin("[name].css")
  ]

我可以在webpack中构建sass / less / css而不需要在我的JS中吗？

1 个答案: