使用加载器将 SASS 文件编译成 JavaScript 中的 CSS 字符串

Question

我有一种情况需要从 SASS 文件生成的 CSS 字符串，该文件已在 JavaScript.

中编译

我有一个解决方案只适用于 CSS，使用 raw-loader

https://github.com/webpack-contrib/raw-loader

使用以下代码...

import css from '!!raw-loader!../css/styles.css';
console.log(css);

然而，为此我需要在执行此步骤之前手动编译 SCSS，我真的不想这样做。

我更愿意做这样的事情...注意它是一个 SCSS 而不是 CSS 文件

import css from '!!raw-loader!../css/styles.scss';
console.log(css);

但是这个 returns 一些 JavaScript 相反，我的 webpack 配置中已经有一个 SCSS 加载器，看起来像这样。

        {
            test: /\.s[ac]ss$/i,
            use: [
                {
                    loader: 'style-loader',
                    options: {
                        insert: 'head', // insert style tag inside of <head>
                        injectType: 'singletonStyleTag' // this is for wrap all your style in just one style tag
                    }
                },
                'css-loader',
                'sass-loader'
            ]
        },

Answer 1

我已经知道怎么做了...

import css from '!!css-loader!sass-loader!../css/styles.scss';

这会将其放入一个对象中，该对象的内部 CSS 作为一个字符串

使用加载器将 SASS 文件编译成 JavaScript 中的 CSS 字符串

Compiling SASS file into CSS string in JavaScript with loader

javascript

css

sass

loader

webpack