javascript - 样式加载器不适用于 Webpack2

Question

我已经简化了我的 webpack2 配置。但这仍然不起作用( 没有错误和警告)。

webpack.config.js

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

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

module.exports = {
  entry: path.join(__dirname, 'src/index.js'),
  resolve: {
    modules: ['node_modules', path.join(__dirname, 'src')],
    extensions: ['.web.js', '.js', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.less$/,
        exclude: /node_modules/,
        loaders: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader'],
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        test: /\.(svg)$/i,
        use: 'svg-sprite-loader',
        include: svgDirs,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      hash: true,
    }),
  ],
};

我厌倦了注销这些样式。但是都是空对象!

import styles1 from './Styles1.less';
import styles2 from './Styles2.css';
console.log(styles1); // empty object!
console.log(styles2); // empty object!
<div className={styles1.class1}></div> // not working

下面是我的package.json和.babelrc，如果需要的话可以看看。

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"
  }
}

.babelrc

{
  "env": {
    "development": {
      "presets": ["react", "es2015", "stage-0"],
      "plugins": [
        [
          "react-transform",
          {
            "transforms": [
              {
                "transform": "react-transform-hmr",
                "imports": ["react"],
                "locals": ["module"]
              }, {
                "transform": "react-transform-catch-errors",
                "imports": ["react", "redbox-react"]
              }
            ]
          }
        ],
        ["import", { "style": "css", "libraryName": "antd-mobile" }],
        ["transform-decorators-legacy"]
      ]
    }
  }
}

Answer 1

style-loader工作正常，但它没有按照您的想法进行。它所做的就是将你的 CSS 注入(inject)到 <style> 中。在运行时标记。

实际问题是您希望导入的行为类似于 CSS modules ，但您实际上并没有使用 CSS 模块。使用您当前的设置，您可以导入 CSS 并且这些类将在全局范围内可用，因此您可以在元素上使用该类名称。例如:

import './Styles1.less';

<div className="class1">Hello World</div>

通过启用 CSS 模块(在 css-loader 上)，当您导入任何 CSS 时，您将收到一个对象，其中类名映射到类的实际标识符。您需要更改相应的规则。

{
  test: /\.less$/,
  exclude: /node_modules/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true,
        importLoaders: 1,
      },
    },
    'less-loader'
  ],
},
{
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true,
      },
    },
  ],
},

有了它，您就可以随心所欲地使用它们了。

import styles1 from './Styles1.less';

<div className={styles1.class1}>Hello World</div>

实际的 DOM 元素看起来像这样:

<div class="_3Rxg00d8E5vC1LOyJvBzl2">Hello World</div>