如何在react-static中使用node-sass

Question

我正在使用react-static，我也想使用sass。

这是我的package.json

  "dependencies": {
    "@reach/router": "^1.2.1",
    "axios": "^0.19.0",
    "bulma": "^0.8.0",
    "bulma-start": "^0.0.3",
    "node-sass": "^4.13.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-icons": "^3.8.0",
    "react-router-dom": "^5.1.2",
    "react-slick": "^0.25.2",
    "react-static": "^7.2.0",
    "react-static-plugin-reach-router": "^7.2.0",
    "react-static-plugin-sass": "^7.2.2",
    "react-static-plugin-sitemap": "^7.2.0",
    "react-static-plugin-source-filesystem": "^7.2.0",
    "slick-carousel": "^1.8.1"
  }

据我所知，要使用sass添加node-sass并导入SCSS文件。但它不起作用。

Answer 1

看起来他们有一个关于SASS集成的plugin。按照他们的安装，然后你可以导入你的SASS文件。

Answer 2

你可以用webpack来做这件事。

{
    test: /\.s[ac]ss$/i,
        use: [
             'style-loader',
             'css-loader',
             'sass-loader',
        ]
}

将其添加到"module“对象下的"rules”数组中。