Question

我正在使用webpack构建我的es6应用程序。不幸的是，我无法找到如何将所有SASS文件捆绑到一个单独的文件中，以便从主html页面导入。

目前我在JavaScript视图中编译这样的sass：

require("./../scss/main.scss")

使用以下加载器：

{
   test: /\.scss$/,
   loaders: ["style", "css", "sass"]
}

但这不是我想要的。我希望为文件main.scss创建一个条目，然后将其转储到项目中的某个位置，比如public文件所在的index.html文件夹中也是如此可以导入。

任何？

Answer 1

您必须使用extract-text-html插件才能执行此操作。在你的webpack.config.js中设置：

var webpack = require('webpack'),  


ExtractTextPlugin = require("extract-text-webpack-plugin"),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  path = require('path'),
  srcPath = path.join(__dirname, 'src'),
  sassLoaders = [
    "css-loader",
    "autoprefixer-loader?browsers=last 2 version",
    "sass-loader?indentedSyntax=sass&includePaths[]=" + path.resolve(__dirname, "./src"),
  ];

对于加载器和插件，我建议：

module: {
    loaders: [
      {test: /\.scss$/, loaders: ["style", "css", "sass"]},
      {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
      {test   : /\.woff|\.woff2|\.svg|.eot|\.ttf|\.png/, loader : 'url?prefix=font/&limit=10000&name=/assets/fonts/[name].[ext]'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("main.css"),
    new webpack.NoErrorsPlugin(),
  ]

编辑：当您使用ExtractTextPlugin时，它会从输出文件夹中捆绑在一起的sass文件中放置一个css。您可以将名称放在插件上，如：new ExtractTextPlugin("main.css")

输出

output: {
    path: path.resolve(__dirname, "./public"),
  },

我建议您同时检查HtmlWebpackPlugin以自动注入hss中的css和js以及CommonsChunkPlugin，这样您就可以将所有的lib构建成一个单独的js，将所有代码构建到另一个中，这样可以节省一些调试时间。< / p>

你如何用webpack捆绑所有sass文件？

1 个答案: