Question

我正在React中构建一个Web组件，需要将我用Sass编写的已编译组件样式作为字符串传递到组件的<style>标签中。

组件代码： <MyWebComponent>已成功设置为使用ReactShadow

制作组件的阴影

如果我通过以下import语句使用已编译的CSS文件，则该文件正在运行：

import componentCSS from '!!css-loader!./my-component/index.css';

我需要：

在该import中使用SCSS文件
取消组件代码中的内联!!css-loader!内联加载程序配置语法

import componentCSS from './my-component/index.scss';

...

render() {
  return (
    <MyWebComponent shadowStyles={[componentCSS]}> // componentCSS needs to be a string
      <h1>Hello Web Component</h1>
    </MyWebComponent>
  );   
}

如果我console.log(componentCSS)，我得到一个空对象{}。

Webpack配置的样式位：

...
{
      test: /\.scss$/,
      include: [
        path.resolve(__dirname, './web-components'),
      ],
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: { importLoaders: 1 }
        },
        {
          loader: 'postcss-loader',
          options: { sourceMap: true }
        },
        {
          loader: 'resolve-url-loader',
          options: { sourceMap: true }
        },
        {
          loader: 'sass-loader',
          options: { sourceMap: true, outputStyle: 'compressed' }
        },
        {
          loader: '@epegzz/sass-vars-loader',
          options: {
            syntax: 'scss',
            files: [path.resolve(__dirname, './scss/index.scss')]
          }
        }
      ]
    },
    {
      test: /\.css$/,
      include: path.resolve(__dirname, './web-components'),
      use: [
        'raw-loader'
      ]
    },
...

我已经尝试过使自定义加载程序失败，例如尝试用有效的内联加载程序语法替换组件代码中的导入字符串：

// my-loader.js / Custom webpack loader
module.exports = function(content) {
  content = content.replace(
    "import componentCSS from './my-component/index.scss'", 
    `import componentCSS from '@epegzz/sass-vars-loader?syntax=scss&files[]=${path.resolve(__dirname, './scss/index.scss')}!sass-loader!css-loader!./my-component/index.scss'`
  )
  return content;
};

在我深入自定义加载程序兔子洞之前，是否可以进行配置选项或语法更改？

使Sass文件的命名导入可作为字符串使用

0 个答案: