Question

我正在尝试使CSS模块与React组件一起使用。我的代码如下：

.main { background: red; }

CSS只是

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var WebpackNotifierPlugin = require('webpack-notifier');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var path = require('path');

var sassLoaders = [
  'css-loader?modules',
  'postcss-loader?modules',
  'sass-loader?sourceMaps&modules&includePaths[]=' + path.resolve(__dirname, './sass')
];

var config = {
  entry: './app/index.js',
  output: {
    path: 'public',
    filename: 'index.js'
  },
  sassLoader: {
    includePaths: path.resolve(__dirname, './sass')
  },
  plugins: [
    new WebpackNotifierPlugin({
      title: 'Webpack',
      alwaysNotify: true
    }),
    new ExtractTextPlugin('style.css'),
    new BrowserSyncPlugin({
      port: 7000,
      ui: false,
      proxy: 'http://localhost:3000/'
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react', 'stage-0']
        }
      },
      {
        test: /\.css$/,
        loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
      }
    ]
  },
  postcss: function() {
    return [
      precss,
      autoprefixer({ browsers: ['last 2 versions'] })
    ];
  }
};

module.exports = config;

和webpack配置：

scss

当我想运行我的代码时会出现问题。无论我是否包含css或[0] SyntaxError: style.css: Unexpected token (1:0) [0] > 1 | .main { [0] | ^ [0] 2 | background: red; [0] 3 | }文件，我总是得到

{{1}}

我该怎么办？

Answer 1

您无需定义导入的名称，只需导入CSS的路径，如下所示：

import './style.css';

然后您的Webpack将知道该怎么做。否则，它认为您正在尝试导入一些js模块，并为语法错误而哭泣。

Answer 2

您需要 css-modules-transform。您可以按照以下步骤添加：

npm i -D babel-plugin-css-modules-transform
打开您的 .babelrc 文件（或 babel.config.js），并在插件部分添加“css-modules-transform”

“插件”：[ “变换对象休息传播”， “css-modules-transform” ]

CSS模块 - 意外令牌

2 个答案: