Question

我的任务是将Django项目的静态资产管理转换为webpack（目前使用django pipeline）。

我让JavaScript没问题，然后使用sass-loader移到SASS文件中，令我恐惧的是，似乎要将CSS转换为JavaScript，这显然已经成为现实。

问题：

我为什么要这样做？
在Django项目上值得吗？
要使此模板生效，需要在HTML模板中进行哪些更改？
是否有任何与此相关的Django插件？

编辑：

显然是css-loader会将.css转换为js而不是sass-loader，但是如果我将其注释如下：

module: {
  rules: [
    {test: /\.(js|es6)$/, exclude: /node_modules/, loader: "babel-loader" },
    {test: /\.css$/, exclude: /node_modules/, loader: "raw-loader"},
    {
      test: /\.(sass|scss)$/,
      use: [
        //"css-loader", // translates CSS into CommonJS
        "sass-loader" // compiles Sass to CSS, using Node Sass by default
      ]
    }
  ]
}

然后我得到：

Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.

那么我可以还是不可以使用sass-loader将sass编译为css？

Answer 1

我相信是css-loader将.css转换为js而不是sass-loader。 Check first three lines in sass-loader readme。

我是前端开发人员，所以我只能回答您的第一个问题：

为什么将css转换为js？
- 您可以使用相对路径（否则必须记住编译后项目的结构）。
- 您可以导入类的名称，并在其上附加哈希。在这种情况下，您可以重用类名，例如.box .container等，而不必担心会破坏样式，因为在编译版本中，它们看起来像是.box-h12f2，来自一个文件，{{1} }。
- 您可以将css中的值导入js。一些库可以自定义颜色，但是它们在js中完成。通常，您希望拥有单一的事实来源，以便在整个项目中的一个位置轻松更改样式。

尝试此配置（带有src / styles.scss文件）

.box-aeg2

为什么要将CSS集成到JavaScript中？

1 个答案: