[webpack2]样式未加载(..css/..less)

Question

我目前正在开发一个webpack2 + react +antd-移动应用程序，除了没有加载的样式(..css/..less)之外，一切都正常工作。我真的找不到问题，控制台上没有打印错误。

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');

// antd-mobile SVG配置方式
const svgDirs = [
  require.resolve('antd-mobile').replace(/warn\.js$/, ''),
  path.resolve(__dirname, 'src/assets/svg'),
];

module.exports = {
  devtool: 'source-map',
  context: path.join(__dirname, 'src'),
  entry: './index',
  output: {
    filename: '[hash].js',
  },
  resolve: {
    modules: ['node_modules', path.join(__dirname, 'src')],
    extensions: ['.web.js', '.js', '.json', '.less', '.css'],
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.(css|less)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader', 'less-loader'],
        }),
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        test: /\.(svg)$/i,
        use: 'svg-sprite-loader',
        include: svgDirs,
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin('main.css'),
    new HtmlWebpackPlugin({
      template: 'index.html',
      hash: true,
    }),
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(JSON.parse(process.env.NODE_ENV === 'development' || 'true')),
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: () => {
          return [
            pxtorem({ rootValue: 100, propWhiteList: [] }),
            autoprefixer,
          ];
        },
      },
    }),
  ],
};

我可以导入更少的，但样式没有加载，没有错误输出显示在控制台上；

import styles from './styles/AssetItem.less';

package.json

{
  "private": true,
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --hot --port 8000",
    "build": "webpack -p --progress --colors",
    "lint": "eslint --ext .js src test"
  },
  "dependencies": {
    "antd-mobile": "^1.1.0",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "react-native": "0.42.3",
    "react-redux": "^5.0.4",
    "react-router": "^4.1.1",
    "react-router-redux": "^4.0.8",
    "redux": "^3.6.0",
    "redux-saga": "^0.14.8",
    "regenerator-runtime": "^0.10.3"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "babel-core": "^6.24.1",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.0.0",
    "babel-plugin-import": "^1.1.1",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "cross-env": "^4.0.0",
    "css-loader": "^0.28.0",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.10.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "postcss": "^5.2.17",
    "postcss-loader": "^1.3.3",
    "postcss-pxtorem": "^4.0.0",
    "react-transform-catch-errors": "^1.0.2",
    "react-transform-hmr": "^1.0.4",
    "redbox-react": "^1.3.6",
    "style-loader": "^0.16.1",
    "svg-sprite-loader": "^0.3.1",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.5"
  }
}

Answer 1

我不知道它是否对你有帮助，但这是我用webpack2解析css文件的一部分

test: /\.css$/,
    use: [
      {
    loader: "style-loader"
      },
      {
        loader: "css-loader",
        options: {
          modules: false
        }
      }
    ]
  },

Answer 2

我认为，问题在于您忘记了新的ExtractTextPlugin语法，您可以在这里阅读更多信息：https://webpack.js.org/guides/migrating/#extracttextplugin-extract。

​

plugins: [
    new ExtractTextPlugin({
      filename: "main.css"
    })

​

应该为输出文件添加路径。

 output: {
   filename: '[hash].js',
   path: path.resolve(__dirname, 'public'),
  },

​

Answer 3

这应该是可行的：

 module: {
        rules: [
            {
                test: /.js$/,
                use: [
                    { loader: 'babel-loader' }
                ],
            },
            {
                test: /(\.css|\.less)$/,
                loader: ExtractTextPlugin.extract({
                        fallbackLoader: 'style-loader',
                        loader: "css-loader!less-loader",
                }),
            },
        ],
    },
    plugins: [
        new ExtractTextPlugin('main.css'),
    ],