时间戳

首页 > 解决方案 > 为什么要将 CSS 集成到 JavaScript 中？

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

问题描述

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

我完成了 JavaScript 没有问题，然后使用sass-loader移动到 SASS 文件，令我恐惧的是，它似乎想要将 CSS 转换为 JavaScript，这显然是现在的事情。

问题：

  1. 我为什么要这样做？
  2. 在 django 项目上值得做吗？
  3. 需要在 HTML 模板中进行哪些更改才能使其正常工作？
  4. 是否有任何 Django 插件可以帮助解决这个问题？

编辑：

显然它将css-loader.css 转换为 js not 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 吗？

标签： djangowebpack

解决方案

我相信它是css-loaderwhich 转换.css为jsnot sass-loader。检查 sass-loader 自述文件中的前三行。

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

  1. 为什么要转换css成js？

    • 您可以使用相对路径（否则您必须记住编译后项目的结构）。

    • 您可以导入类的名称并将哈希附加到它。在这种情况下，您可以重用类名.box .container等，而不必担心会弄乱您的样式，因为在编译版本中，它们看起来像.box-h12f2一个文件和.box-aeg2另一个文件。

    • 您可以将值从您的 css 导入到 js。一些库可以自定义颜色，但它们是在 js 中完成的。通常，您希望拥有单一的事实来源，以便在一个地方轻松更改整个项目的样式。

试试这个配置（使用 src/styles.scss 文件）

const
    path = require('path'),
    webpack = require('webpack'),
    MiniCssExtractPlugin = require('mini-css-extract-plugin');

const srcFolder = path.resolve(__dirname, 'src');

const miniCssExtractPlugin = new MiniCssExtractPlugin();

const config = {
    resolve: {
        modules: [ srcFolder, 'node_modules', ],
        extensions: [ '.js', ],
    },

    entry: [
       path.resolve(srcFolder, 'styles.scss'),
    ],

    output: {
        path: path.resolve(__dirname, 'build'),
    },

    module: {

        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ],
            }

        ]
    },
    plugins: [
        miniCssExtractPlugin
    ]
};

module.exports = config;

推荐阅读