时间戳

首页 > 解决方案 > LESS 不使用 Webpack 4 加载

javascript - LESS 不使用 Webpack 4 加载

问题描述

我正在使用 Gulp，但现在尝试通过 webpack v4 运行我的网站。请耐心等待我是 webpack 的新手。

TopNav.js - 反应组件

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

    export default class TopNav extends Component{
      render(){
        return (
          <nav className="ink-navigation bottom-border-grey-veryLight">
            <div className="column-group">
              <div className="all-45">
                <ul className="ft-topnav menu horizontal">
                  <li>
                    <Link className="margin-top-10" ref="link" to={"/"}>
                      <span className="underline-grey large underlined">
                        <span className="font-black">H</span><span className="grey-dark">ome</span>
...

现在的问题是，我在master.less中设置的灰色和其他样式不起作用。

在此之前，gulp像这样处理我的 less 文件：

function precompile(cb) {
  src('./src/client/less/*.less')
    .pipe(
      less({
        compress: true,
      })
    )
    .pipe(hash())
    .pipe(gulp.dest('./build/client/css'))
    .pipe(hash.manifest('styles-manifest.json'))
    .pipe(dest('.'));
  cb();
}

所以它会为master.less输出一个.css文件

现在我正在使用webpack.config.js文件：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/client/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader', // translates CSS into CommonJS
          },
          {
            loader: 'less-loader', // compiles Less to CSS
          },
        ],
      },
      {
        test: /\.css$/i,
        use: [
          { loader: 'style-loader', options: { injectType: 'linkTag' } },
          'css-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['url-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/client/index.html',
      filename: './index.html',
      hash: true,
    }),
  ],
};

在index.html中，它尝试像往常一样使用master.css ：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My App</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="https://ink.global.ssl.fastly.net/3.1.10/css/ink.min.css">
        <script src="https://ink.global.ssl.fastly.net/3.1.10/js/ink-all.min.js"></script>
        <script src="https://ink.global.ssl.fastly.net/3.1.10/js/autoload.js"></script>
        <!--[if lt IE 9 ]>
        <link rel="stylesheet" href="ink-ie.min.css" type="text/css">
        <![endif]-->
        <link rel="stylesheet" type="text/css" href="/lib/css/master.css" />
    </head>
    <body>
        <div id="app"></div>
        <script src="/scripts/app.bundle.js"></script>
    </body>
</html>

不知道我在这里缺少什么。

错误截图

得到错误：[！[在此处输入图像描述][1]][1]

标签： javascriptwebpack

解决方案

为了less-loader使其工作，它应该位于以您的entry: './src/client/index.js',js 文件开头的依赖关系树中，因为您没有导入它，所以它不会在依赖关系图中。

如果您有一个less文件，请在您的条目文件中添加一个导入。如果less每个组件都有文件，请在组件 js 文件中添加导入。

// TopNav.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import 'TopNav.less'; // <- add this

    export default class TopNav extends Component{
    ...

推荐阅读