Sass 在Webpack4中应用样式

我在使用SCS和Webpack4将类应用于React中的ul元素时遇到了很大的问题。我已将我的项目升级到Webpack4（#yesiamstupid）

如果我标记了一种元素（ul），它就会工作。 不过，我自己的类“navMenu”从未应用过。 我可以在web开发人员工具-->styles.scs中看到该类

我希望导航中的文本背景为蓝色

[app.js]

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import AppRouter from './routers/AppRouter';

import 'normalize.css/normalize.css';
import './styles/styles.scss';

const jsx = (
  <Provider>
    <AppRouter />
  </Provider>
);

ReactDOM.render(jsx, document.getElementById('app')); 

[[u settings.scss]

// Colors
// Spacing
$s-size: 1.2rem;
$m-size: 1.6rem;
$l-size: 3.2rem;
$xl-size: 4.8rem;
$desktop-breakpoint: 45rem;

[[u header.scss]

ul {
  list-style-type: circle;
}

.navMenu {
  text-align:center;
  background:blue;
  padding-top:400px;
}

[styles.scss]

@import './base/settings';
@import './base/base';
@import './components/header';

[webpack.config.js]

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = () => {
  return {
    watch: true,
    //mode: 'development',
    entry: ['babel-polyfill', './src/app.js'],
    output: {
      path: path.join(__dirname, 'public', 'dist'), //absolute path
      filename: 'bundle.js' //name is whatever you want
    },
    module: {
      rules: [{
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      }, {
        test: /\.svg$/,
        loader: 'raw-loader'
      }, {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      }

      ]
    },
    plugins: [
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "style.css",
        //chunkFilename: "chunk.css"
      })
    ],
    devtool: 'inline-source-map',
    devServer: {
      contentBase: path.join(__dirname, 'public'), //absolute path
      historyApiFallback: true, //go to index if path not found
      publicPath: '/dist' //specify where bundle files liveY
    }
  };
}

---

我建议您拆分css和scss文件的测试

在您的代码中，您正在使用用于css的sass加载程序。相反，请使用以下内容：

{
    test: /\.css$/,
    include: 'path-to-css-files',
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader'
    ],
},

{
    test: /\.(sa|sc)ss$/,
    exclude: 'path-to-css-files',
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      'sass-loader'
    ],
},

---

在将类更改为“.navMenu li{…”然后更改为“ul.navMenu{…”然后更改为“navMenu{..”然后再更改为“.navMenu{…”之后，代码运行了！？？？？？？？？？？？？？？？这看起来像是一个bug…现在它又停止工作了（谢谢！随着网页升级到4.16.5版+riunning纱线升级，似乎可以解决这个问题！Happy camper！：D

ul {
  list-style-type: circle;
}

.navMenu {
  text-align:center;
  background:blue;
  padding-top:400px;
}

@import './base/settings';
@import './base/base';
@import './components/header';

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = () => {
  return {
    watch: true,
    //mode: 'development',
    entry: ['babel-polyfill', './src/app.js'],
    output: {
      path: path.join(__dirname, 'public', 'dist'), //absolute path
      filename: 'bundle.js' //name is whatever you want
    },
    module: {
      rules: [{
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      }, {
        test: /\.svg$/,
        loader: 'raw-loader'
      }, {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      }

      ]
    },
    plugins: [
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "style.css",
        //chunkFilename: "chunk.css"
      })
    ],
    devtool: 'inline-source-map',
    devServer: {
      contentBase: path.join(__dirname, 'public'), //absolute path
      historyApiFallback: true, //go to index if path not found
      publicPath: '/dist' //specify where bundle files liveY
    }
  };
}

{
    test: /\.css$/,
    include: 'path-to-css-files',
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader'
    ],
},

{
    test: /\.(sa|sc)ss$/,
    exclude: 'path-to-css-files',
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      'sass-loader'
    ],
},