Webpack sass css文件在哪里

JavaScript CSS

神无逆天

2020-03-18

我正在将Web Pack与Sass loader一起使用，如下所示：

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: "style!css!sass"
      }
    ]
  }
};

但是我看到样式适用于样式标签，生成css文件在哪里？

第2147篇《Webpack sass css文件在哪里》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

神无西里 2020.03.18

默认情况下，样式加载器将已编译的CSS内联到您的包中，该包与输出文件（例如）一起添加到页面的开头bundle.js。使用extract-text-webpack-plugin可以从捆绑软件中删除已编译的CSS，并将其导出到单独的文件中。

首先-将加载程序包装在插件中：

 loaders: [{
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract(
    "style",
    "css!sass")
 }]
},

然后告诉插件如何调用它生成的文件：

plugins: [
    new ExtractTextPlugin("app.css")
 ]

通常将此文件包含在HTML中。

番长猿阳光 2020.03.18

如果在使用Webpack时需要单独的CSS文件，则需要使用extract-text-webpack-plugin。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android