如何在ReactJS中与外部Sass样式表共享组件

问题描述

我试图为我的React项目构建一个monorepo，因为大多数代码在我的一些项目之间共享。我正在为此使用Yarn工作区和Lerna。

我设法得到一个基本的示例，其中两个项目之间共享React组件。但是，在此工作示例中，样式表是纯CSS样式表，并且已正确导入。 我正在使用Babel来编译React和ES6代码。

lerna exec --scope shared -- babel src -d dist --copy-files

其中shared是我的包含共享组件的软件包。上面的命令将已转译的JS和CSS文件放在dist文件夹中。

但是，我的实际代码库中有.scss个文件。因此，在示例项目中尝试将外部CSS文件替换为外部SCSS文件。但是，它不起作用。样式表未应用。

我想我理解为什么它一定不能工作。在CRA项目中，每当我们使用.scss文件时，我认为Webpack会将它们预处理为.css文件。因此不会发生这种情况。如果我错了请纠正我。

我尝试使用Webpack代替Babel。但是，我遇到的问题是Webpack将所有文件捆绑到一个文件中，这是我不想要的。我希望单个组件文件应被转译并保存在dist下的相同文件夹结构中。请参阅下面的文件夹结构。 shared是具有共享组件的软件包，而myapp软件包则使用共享的组件。

workspace
--packages
  --shared
    --dist
      --components
          --button
            --Button.js
            --Button.scss
          --header
            --Header.js
            --Header.scss
    --src
       --components
          --button
            --Button.js
            --Button.scss
          --header
            --Header.js
            --Header.scss 

  ---myapp

我的webpack.config.js

// Webpack uses this to work with directories
const path = require('path');
const webpack = require('webpack');

module.exports = {

    entry: './src/index.js',// Path and filename of the result bundle.
    // Webpack will bundle all JavaScript into this file
    output: {
        path: path.resolve(__dirname,'dist'),libraryTarget: 'commonjs2'
        //filename: 'bundle.js'
    },module: {
        rules: [
            {
                test: /\.js$/,exclude: /node_modules/,use: {
                    loader: 'babel-loader',}
            },{ test: /\.css$/,use: ['style-loader','css-loader'] },{ test: /\.(jpg|png|gif|svg|tiff)$/,use: 'file-loader' },{ test: /\.(woff|woff2|eot|ttf|otf)$/,use: 'file-loader' }
        ]
    }
};

由于无法确定如何在可以共享的React组件中导入SCSS文件，因此我陷入了困境。

我不确定是否有办法告诉Webpack和Babel编译React文件并将其仅放置在dist文件夹中而不将它们捆绑到单个文件中，以及是否预处理{{1 }}文件，并在转译的文件中使用它们。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）