为什么我要将CSS集成到JavaScript中? [关闭]

问题描述 投票:0回答:1

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

我完成了JavaScript没有问题,然后转移到SASS文件,使用sass-loader,我恐怖似乎想要将CSS转换为JavaScript,这显然是一件事情。

问题:

  1. 我为什么要这样做?
  2. 是否值得在django项目上做?
  3. HTML模板中需要更改哪些内容才能生效?
  4. 是否有任何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?

django webpack
1个回答
0
投票

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

我是开发人员,所以我只能回答你的第一个问题:

  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;
© www.soinside.com 2019 - 2024. All rights reserved.