webpack：你如何将所有的scss文件捆绑到一个main.css文件中

我正在制作一个反应应用程序，所以我的文件结构有一个包含每个组件文件夹的组件文件夹。每个组件文件夹包含ComponentName.js和ComponentName.scss文件。如何配置我的webpack，以便我可以在我的index.html的头部添加一个<link rel="stylesheet" href="main.css" />？webpack：你如何将所有的scss文件捆绑到一个main.css文件中

我在我的webpack配置中有ExtractTextPlugin，但我不确定是否应该使用它，因为我不需要任何css文件。我也在寻找一个scss加载器，但只能找到sass加载器，所以我应该使用它？

来源

2016-08-02 Michael L.

您或许可以使用HTML Webpack Plugin进行此项工作。这可以将您的index.html作为输入模板，并自动将脚本和链接标签注入到其中。所以它可以将你的main.css和你的js包注入你的html页面。它对ExtractTextPlugin非常有用。

我有以下配置类似的东西：

我的装载机：

module: { 
    loaders: [{ 
    test: /critical\.scss$/, 
    loader: ExtractTextPlugin.extract(['css', 'postcss', 'sass']) 
    }] 
}

我的插件：

plugins: [ 
    new ExtractTextPlugin('css/critical.css'), 
    new HtmlWebpackPlugin({ 
    template: 'src/index.html' 
    }) 
]

有了这个方法，我需要在代码中SCSS文件，只需在您的应用程序组件中执行此操作，并且您可以让您的scss文件导入其他scss文件。我正在使用sass-loader与post-loader和css-loader相结合。我使用后装载器，所以我可以使用autoprefixer。我有一个项目为基于Esri的应用程序做了类似的工作，除了我使用自定义插件将css内联到头部并为折叠内容下面添加样式标记。你可以在这里找到https://github.com/Robert-W/esri-redux。

注：我仍然自己学习webpack，所以这可能不是最好的设置，但它适用于我。

来源

2016-08-02 18:22:08

您可以使用负责编译所有CSS文件并将它们捆绑到index.css文件中的webpack-text-extract-pluggin。

另外请注意，您也需要安装sass-loader才能编译scss。

在配置的WebPack：

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
config = { 
    ..., 
    plugins: [ 
     ..., 
     new ExtractTextPlugin('index.css') 
    ], 
    module: { 
     loaders: [ 
      ... 
      { 
       test: /\.css$/, 
       loader: ExtractTextPlugin.extract('style','css') 
      }, 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract('style', 'css!sass') 
      } 
     ] 
    } 
}

index.html中：

<link rel="stylesheet" type="text/css" href="/index.css">

在通过的WebPack得到任何JavaScript文件：

require("./styles/my-custom-file.scss");

来源

2016-10-20 09:44:05

webpack：你如何将所有的scss文件捆绑到一个main.css文件中

回答

相关问题