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

Question

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

use*_*707 1 javascript css sass loader webpack

我有一种情况，我需要获取从已用 JavaScript 编译的 SASS 文件生成的 CSS 字符串。

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

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

使用以下代码...

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

Run Code Online (Sandbox Code Playgroud)

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

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

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

Run Code Online (Sandbox Code Playgroud)

但这会返回一些 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'
            ]
        },

Run Code Online (Sandbox Code Playgroud)

Answer 1

use*_*707 7

我已经想出了如何做到这一点...

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

Run Code Online (Sandbox Code Playgroud)

这将它放入一个对象中，该对象内有 CSS 作为字符串

归档时间：	5 年，10 月前
查看次数：	554 次
最近记录：	5 年，10 月前