在 Webpack 4 中应用样式

Question

我在使用 SCSS 和 Webpack 4 将 classes 应用于 React 中的 ul 元素时遇到了很大的问题。我已将我的项目升级到 Webpack 4 (#yesiamstupid)

如果我 taget 一种元素 (ul)，它就可以工作。不过，我自己的 class "navMenu" 从未应用过。我可以在 Web 开发人员工具中看到 class --> styles.scss

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

[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'));

[AppRouter.js]

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import StartPage from '../components/StartPage';
import Header from '../components/Header';

const AppRouter = () => (
  <BrowserRouter>
    <div>
      <Header />
      <Switch>
        <Route path="/" component={StartPage} exact={true} />
      </Switch>
    </div>
  </BrowserRouter>
);

export default AppRouter;

[StartPage.js]

import React from 'react';

const StartPage = () => (
  <div>
    Hello
  </div>
);

export default StartPage;

[Header.js]

import React from 'react';
import { NavLink } from 'react-router-dom';

const Header = () => (
  <header>
    <h1>Test WP4</h1>
    <ul className="navMenu">
      <li><NavLink to="/" activeClassName="is-active" exact={true}>Here we are</NavLink></li>
      <li><NavLink to="/undefined" activeClassName="is-active" exact={true}>This route is undefined</NavLink></li>
    </ul>
  </header>
);

export default Header;

[_base.scss]

html {
  font-size: 62.5%;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: $m-size;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

.is-active {
  font-weight: bold;
}

[_settings.scss]

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

[_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
    }
  };
}

Answer 1

我建议您将测试拆分为 css 和 scss 个文件。

在您的代码中，您正在为 css 使用 sass-loader。而是使用这样的东西：

{
    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'
    ],
},

在 Webpack 4 中应用样式

Applying styles in Webpack 4

sass

webpack-dev-server

webpack-4