我可以在 webpack 中构建 sass/less/css 而无需在我的 JS 中使用它们吗？

Posted 2023-02-22

【中文标题】我可以在 webpack 中构建 sass/less/css 而无需在我的 JS 中使用它们吗？

【英文标题】：Can I build sass/less/css in webpack without requiring them in my JS?

【发布时间】：2016-08-15 07:16:31

【问题描述】：

我目前有一些使用 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) 

...

【问题讨论】：

您将需要 webpack 或 gulp 来将 sass 转换为 css，其中一个错误就够了，这就是您要问的吗？

这是某种限制吗？我通常有一些索引文件来导入我所有的风格相关的东西。

看起来这就是你要找的东西，虽然github.com/peerigon/extract-loader#examples

@azium 我一直在搞乱不同的配置，你是否建议我有一个 js 文件来导入 scss，构建它，并将其包含在脚本标签中？我也会研究一下提取加载器，谢谢。

酷，我更了解现在发生了什么。当您使用 SCSS 文件作为条目时，它将生成一个类似的虚拟 javascript 文件 (related issue)。实际生成您期望的 CSS 文件的部分是 new ExtractTextPlugin("[name]")。你能试着把它改成new ExtractTextPlugin("[name].css")吗？

【参考方案1】：

我在@bebraw 的帮助下解决了这个问题

正如他在评论中所说，当使用 ExtractTextPlugin 时，webpack 将创建一个虚拟 javascript 文件，其后跟您的 output.filename 中的模式。因为我将 ExtractTextPlugin 的输出文件设置为与 output.filename 中的名称完全相同，所以它只是输出 javascript 文件。通过确保 output.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")
  ]

【讨论】：

你能告诉我你的webpack.config.js吗？我有点坚持这个。

我的 webpack 配置是我发布的代码片段

您只发布了部分配置。例如，static_scss 变量在哪里？

它本质上是你的 static_scss 目录的一个字符串。