Question

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

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

我的理解是我必须使用extract-text-webpack-plugin将样式提取到自己的文件而不是<head>中的内联，但我不确定这一部分。我想为sass做以下事情：

编译src/main/stylesheets/**/*.scss
将内容输出到单个文件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"
  }

Answer 1

在此发帖，因为评论中没有真正的空间......如果您有回购的链接，我可能会更有帮助。你的语法不一定是错误的，但是我发布这个是因为这是我知道的最新例子：你可能想尝试使用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')],
},

使用webpack 2编译/导出sass

1 个答案: