如何使 scss 和指南针在 ReactJS 中工作?

Question

>你好，我是Reactjs的菜鸟，我目前正在使用create-react-app，我正在尝试在SCSS中进行开发，我在SCSS中下载了一个示例，我正在尝试使其工作我按照此页面中的说明进行操作：

https://medium.com/@Connorelsea/using-sass-with-create-react-app-7125d6913760

我安装了这个：包

npm install sass-loader node-sass --save-dev

然后将我的 webpack.config.dev.js 修改为如下所示的内容：

{
test: /.scss$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('sass-loader'),
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},

然后我在我的 React 组件中导入 scss 文件：

导入 './cell.scss';

一切似乎都运行良好，但是我下载此scss文件的示例以以下行开头：

@import "指南针/CSS3";

当我尝试运行我的应用程序时，出现此错误：

模块构建失败： @import "指南针/CSS3"; ^ 找不到要导入的文件或无法读取：compass/css3。 父样式表：标准样式表 在/cell.scss 中(第 2 行，第 1 列)

我真的没有找到任何明确的解决方案......任何帮助将不胜感激。

Answer 1

我发现的一种解决方法是手动编译代码。

您可以将所有样式保存在样式表文件夹中。 然后在 sass 目录中，保留所有 sass 文件并设置这样的 config.rb。

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

您可以使用compass compile进行编译。

请确保在此之前安装指南针。