從SCSS產生的CSS在哪里？ -有解無憂

我在我的React.js應用程式中使用SCSS。我使用npm start啟動服務器，我不需要手動編譯成CSS，這很酷，但另一方面，我可能想查看實際生成的CSS。它的位置在哪里？

這里是我的package.json：

{
  "name": "client",
  "版本": "0.1.0"。
  "私有"。true。
  "依賴性": {
    "@fortawesome/fontawesome-svg-core"。"^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.15",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap"。"^5.1.1",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.3",
    "react-bootstrap-submenu": "^1.0.3",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.0",
    "sass": "^1.39.2",
    "web-vitals": "^0.2.4".
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"。
    "test": "react-scripts test"。
    "eject": "react-scripts eject"。
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"。
    ]
  },
  "browserslist": [
    ">0.3%"。
    "not ie 11"。
    "不死"。
    "不是op_mini all"。
  ]
}

uj5u.com熱心網友回復：

Webpack實際上為你做了所有這些。如果你想看到CSS檔案，運行npm run build，會在里面創建一個構建檔案夾，你會發現static/css

uj5u.com熱心網友回復：

你要找的是一個叫做mini-css-extract-plugin

的插件。

mini-css-extract-plugin

使用這個組件，你可以提取css 在DEV模式下。你不需要每次都建立你的應用程式，以便看到提取的 css。

1 - 安裝該插件 npm install mini-css-extract-plugin

。

2 - 在webpack.config中配置該插件 const MiniCssExtractPlugin = require('mini-css-extract-plugin');

3 - 在插件中你設定插件。plugins: [new MiniCssExtractPlugin()],

4 - 然后，設定規則。 rules:[{ test: /. (sc|c|sa)ss$/i, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], },],

一旦你設定了這個插件，webpack將不會自動插入樣式。你必須編輯你的index.html頁面并添加css的路徑。

5 - 打開index.html頁面，在頭部插入.css檔案。

<link rel="styleheet" href="main.css" >

完整的例子：

>。

// ## webpack.config.js

// # # require the component 
const MiniCssExtractPlugin = require（'mini-css-extract-plugin'）。
const path = require（'path'）。

module.exports = {
    mode: 'development',
    entry: './src/app.js',
    output: {
        filename: 'bundle.js'。
        path: path.resolve(__dirname, 'public'),
    },

    //設定插件
    plugins: [new MiniCssExtractPlugin() ] 。
    module: {

        //獲取css和sass檔案的規則。
        //把MiniCssExtractPlugin加載器放在第一位。
        //這將提取css而不是注入頁面。
        rules: [
            {
                test: /.(sc|c|sa)ss$/i,
                use: [MiniCssExtractPlugin. loader, 'css-loader', 'sass-loader'] 。
            },
        ],
    },
};

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/319805.html

標籤：

上一篇：請幫助我理解為什么在創建vue專案時出現錯誤

下一篇：在嘗試安裝字體真棒時出現錯誤