create-react-app with sass 不加載樣式

Question

我正在嘗試為create-react-app添加 sass/scss 支持。

所以我做了這些步驟：

1. npm eject
2. npm install sass-loader node-sass --save-dev

3. 打開 webpack.config.dev.js 文件並將其添加到加載程序部分：

    { test: /\\.scss$/, loaders: ["style", "css", "sass"] },

在我的 app.js 文件中，我引用了一個 scss 文件： import './css/app.scss';

當我運行npm start一切都編譯沒有錯誤，但應用程序加載時沒有樣式。

我錯過了什么？

Answer 1

我剛剛經歷了這個，似乎有很多人迷失或找不到正確的答案。 這就是我所做的：

控制配置

npm run eject

運行此命令會將所有配置文件和可傳遞依賴項（Webpack、Babel、ESLint 等）復制到您的項目中，正如您注意到的，所有這些都在名為 react-script 的 npm 模塊中。 不要直接修改這個包！

安裝 sass 編譯器和 webpack 加載器

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

此時你必須安裝 sass 編譯器和 webpack 加載器作為開發依賴項。

修改 webpack 配置

1. 打開config\\webpack.config.dev.js 。

2. 將/\\.scss$/,添加到 url 加載器中的 exclude 數組，更新后將如下所示：

    exclude: [ /\\.html$/, /\\.(js|jsx)$/, /\\.css$/, /\\.json$/, /\\.svg$/, /\\.scss$/, //Add this line ],

3. 添加 SASS/SCSS 加載器：

    { test: /\\.scss$/, loaders: ['style', 'css', 'sass'] },

Answer 2

第1步：

npm run eject

現在配置文件將顯示在項目文件夾中

第二步：安裝sass編譯器和webpack加載器

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

在config\\webpack.config.dev.js 中添加/.scss$/到排除數組

第三步：在規則數組中添加下面的loader（應該在file-loader之前添加）

  {
            test: /\.scss$/,
            loaders: [
              require.resolve('style-loader'),
              require.resolve('css-loader'),
              require.resolve('sass-loader')
            ]
  }

並啟動您的應用程序。

您可以將現有的 css 文件重命名為 scss 並工作

Answer 3

我在閱讀它的文檔時遇到了同樣的問題。

Unitl 我發現使用 create-react-app 創建的項目中的 README.md 文件以另一種方式記錄了它並且它有效。 我認為依靠自述文件（隨您創建的項目一起提供）是更好的選擇。

Answer 4

 { test: /\\.scss$/, loaders: ['style', 'css', 'sass','scss'] //add 'scss' },

Answer 5

在不彈出的情況下使用 Sass 進行樣式設置

1) 安裝考拉

Koala是一個 sass、less 等編譯器。 為此，您可以使用您選擇的任何工具。

2）添加你的src文件夾

將包含所有 SCSS 文件的源文件夾添加到 Koala。 它將監視對您的 Sass 文件的任何修改，並立即生成已編譯的 CSS 版本。

3）參考CSS文件

直接在你的項目中使用 Koala 生成的 CSS 文件。

import './style.css';