0

我以前使用过 Grunt 和 Gulp，所以 webpack 对我来说还是有点新。

现在我已经将 webpack 配置为成功地完美地捆绑了我的 javascript。我现在遇到的问题是捆绑我的 sass 并将结果输出到文件中。

我的理解是我必须使用extract-text-webpack-plugin将样式提取到自己的文件而不是内联 in <head>，但我不确定这部分。我希望为 sass 执行以下操作：

  1. 编译内容src/main/stylesheets/**/*.scss
  2. 将内容输出到单个文件app/assets/stylesheets/bundle.css

我知道我可以使用 gulp/grunt 轻松实现这一点，但我正在尝试学习 webpack 如何做事。我webpack.config.babel.js的如下：

import path from "path";
import ExtractTextPlugin from "extract-text-webpack-plugin";

export default {
  entry: {
    index: path.join(__dirname, "src/main/javascripts/application.js")
  },
  output: {
    path: path.join(__dirname, "app/assets/javascripts/"),
    publicPath: "/assets/",
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        include: path.join(__dirname, "src/main/stylesheets/"),
        loader: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              query: { modules: false, sourceMaps: true }
            },
            {
              loader: "sass-loader",
              query: { sourceMaps: true }
            }
          ]
        })
      },
      {
        test: /\.js$/,
        include: path.join(__dirname, "src/main/javascripts/"),
        exclude: /node_modules/,
        use: [
          { loader:  "babel-loader" }
        ],
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin(path.join(__dirname, "app/assets/stylesheets/bundle.css"))
  ]
}

依赖关系package.json是否重要：

  "dependencies": {
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.1",
    "babel-preset-env": "^1.1.8",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^2.0.0-rc.3",
    "node-sass": "^4.5.0",
    "sass-loader": "^6.0.0",
    "style-loader": "^0.13.1"
  }
4

1 回答 1

0

在这里发帖是因为评论中没有真正的空间......如果你有指向回购的链接，我可能会更有帮助。您的语法看起来不一定有问题，但我发布此内容是因为这是我知道的最新示例：您可能想尝试使用option而不是query. 根据文档，似乎不推荐使用查询，但是此设置对我有用（尽管我在这里没有使用提取物），

{
    test: /\.scss$/,
    use: [
        'style-loader?sourceMap',
        {
            loader: 'css-loader',
            options: {
                sourceMap: true,
                importLoaders: 2,
            }
        },
        'postcss-loader?sourceMap',
        'sass-loader?sourceMap'
    ],
    exclude: [path.resolve('node_modules')],
},
于 2017-02-16T15:48:48.757 回答