Question

也许听起来有些虚假，但我想在我的React应用程序中使用SCSS进行样式设置。我知道React将“读取”我的所有样式，并在<style>部分的单独<head>标签中生成它们。我已经eject了这个程序，并配置了webpack.config文件以使用scss。

是否有一种方法（或最佳实践）可以将它们用作外部CSS文件？

这就是我想要得到的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
    <link rel="stylesheet" href="mystyles.css" />
    .
    .
    .

代替此

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
    <style> <!-- my styles --> </style>
    <style> <!-- my styles --> </style>

所以我想拥有一个mystyles.scss文件，其中包含我所有其他的scss文件，如下所示：

mystyles.scss

@import variables.scss;
@import components.scss;

，React将生成一个外部css文件，当我修改任何样式时，create-react-app cli将实时重新加载它。

修改

我想这样使用react，因为我认为使用chrome inspect工具调试样式会更容易。它可以告诉我哪个scss文件具有这种样式。

但是，如果您有一个更好的在React中调试scss的解决方案，我愿意接受它！

Answer 1

最新的CreateReactApp已支持导入sass，

install node-sass

import "./mystyle.scss"; // add to app.js top.

无需使用CRA，您需要通过webpack处理

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

npm install style-loader css-loader --save-dev

并将其添加到您的webpack配置文件中。

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }]
    }
};

Answer 2

通过将其放置在webpack配置文件中，您应该能够从开发人员工具获取对SCSS文件的引用：

devtool: 'source-map',

但是，如果仍然需要单独的CSS文件，则还需要使用Webpack ExtractTextPlugin。在webpack配置的module.rules部分中，您将需要以下内容：

{
    test: /\.scss/,
    use: ExtractTextPlugin.extract( {
        fallback: 'style-loader',
        use: [
            "css-loader",
            "sass-loader"
        ]
    } )
},
plugins: [
    new ExtractTextPlugin( { filename: 'style.css', allChunks: true} )
]

sass-loader将scss文件转换为css，ExtractTextPlugin获取CSS并将其放置在插件配置所定义的单独文件中。

有没有办法在React中将样式用作外部css文件？

2 个答案: