我能否在Webpack中构建Sass/Less/CSS，而不需要在我的JS文件中引用它们？

Question

我能否在Webpack中构建Sass/Less/CSS，而不需要在我的JS文件中引用它们？

javascriptcssreactjssasswebpack

30

我目前有一些使用Webpack成功构建的React组件和Sass样式表。我还有一个主Sass文件，通过gulp任务生成CSS。

我希望只使用其中一种技术，是否可能仅编译Sass到CSS，而不需要在入口文件中关联Sass？

这里是一个尝试使用WebpackExtractTextPlugin的示例：

webpack.config.js

entry_object[build_css + "style.css"] = static_scss + "style.scss";
module.exports = {
  entry: entry_object,
  output: {
    path: './',
    filename: '[name]'
  },
{
  test: /\.scss$/,
  include: /.scss$/,
  loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}
  plugins: [
    new ExtractTextPlugin("[name]")
  ]

运行webpack后，style.css资产看起来像这样：

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {

...

- ex-zac-tly

你需要使用Webpack或Gulp将Sass转译为CSS，其中一个就足够了，这是你所询问的吗？ - QoP

1

这是某种限制吗？我通常有一个索引文件，导入所有与样式相关的内容。 - azium

2

看起来这就是你要找的 https://github.com/peerigon/extract-loader#examples - azium

@azium 我一直在尝试不同的配置，你是在建议我有一个导入scss的js文件，构建它，并将其包含在脚本标记中吗？我还会研究extract-loader，谢谢。 - ex-zac-tly

1

很好，现在我更明白发生了什么。当您将SCSS文件用作入口时，它会生成一个虚拟的JavaScript文件，如下所示（相关问题）。实际生成您期望的CSS文件的部分是 new ExtractTextPlugin("[name]")。您可以尝试将其更改为 new ExtractTextPlugin("[name].css")。 - Juho Vepsäläinen

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ex-zac-tly · Accepted Answer

我在@bebraw的帮助下解决了这个问题。正如他在评论中所述，当使用ExtractTextPlugin时，webpack将按照输出.filename中指定的模式创建一个虚拟的javascript文件。由于我将ExtractTextPlugin的输出文件设置为与输出.filename中的名称完全相同，因此它只输出了javascript文件。通过确保输出.filename和ExtractTextPlugin输出文件名不同，我能够完美地加载sass到css。

这是webpack.config.js最终示例。

entry_object[build_css + "style"] = static_scss + "style.scss";
module.exports = {
  entry: entry_object,
  output: {
    path: './',
    filename: '[name]'
  },
{
  test: /\.scss$/,
  include: /.scss$/,
  loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}
  plugins: [
    new ExtractTextPlugin("[name].css")
  ]