Webpack-dev-server 捆绑 React JS 但不捆绑 SCSS

Question

应用程序是由“create-react-app”命令创建的。捆绑的（通过 webpack）JavaScript 代码在我的 React 应用程序中正常工作，但它似乎没有从 SASS 获得任何样式。控制台或任何地方都没有错误，只是被忽略了。要启动 webpack，我正在运行“npm run start”。 回购以防万一：https://github.com/ankeris/challengefriend

这是代码：

package.json

"scripts": {
    "start": "webpack-dev-server --open --mode development --hot | react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
},
"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.22.1",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
}

webpack.config.js

module.exports = {
entry: './src/index.js',
output: {
    path: path.resolve('dist'),
    filename: 'bundle.js',
},
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
        ]
    },
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader'
        }
    }
    ]
},
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './styles/scss/index.scss';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Answer 1

为了使它工作，我按照link 告诉你如何在react-create-app 中添加 css 预处理器，以下是运行命令：

npm install --save node-sass-chokidar

npm install --save npm-run-all

然后将这些行添加到您的 package.json（在 scripts 部分中）：

"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",

在您的文件中 index.js 将 import './styles/scss/index.scss'; 替换为 import './styles/scss/index.css';

最后你可以通过运行npm start来启动你的应用程序

正如我在评论中所说，react-create-app 使用它自己的 webpack 配置，所以你的 webpack.config.js 没用，你可以从你的项目中删除它

如果你真的要导入scss文件，那么你需要修改默认的react-create-app webpack config，你需要运行npm run eject提取配置，然后修改文件/config/webpack.config.{env}.js

Answer 2

应该是加载器，因为您使用的是 Webpack 4。

请在 Webpack 中添加以下规则并尝试

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