CSS 模块 - 意外标记

Posted 2023-02-22

【中文标题】CSS 模块 - 意外标记

【英文标题】：CSS Modules - unexpected token

【发布时间】：2017-01-19 01:09:41

【问题描述】：

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

import styles from './style.css';

const Header = () => 
  return (
    <header className=styles.main></header>
  )
;

export default Header;

CSS 只是

.main  background: red; 

和 webpack 配置：

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;

当我想运行我的代码时会出现问题。无论我是否包含scss 或css 文件，我总是得到

[0] SyntaxError: style.css: Unexpected token (1:0)
[0] > 1 | .main 
[0]     | ^
[0]   2 |   background: red;
[0]   3 | 

我能做什么？

【问题讨论】：

我很确定你不需要将你的类添加为对象，如果你在 webpack 上构建和使用加载器，你可以简单地使用你的类：className="main"

【参考方案1】：

CSS 模块为以.module.css 扩展名结尾的文件打开。因此，将 CSS 文件从 style.css 重命名为 style.module.css 并在导入 Header React 组件时更改路径。

像这样：

import styles from './style.module.css';

【参考方案2】：

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

npm i -D babel-plugin-css-modules-transform

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

“插件”：[ “变换对象休息传播”， “css 模块转换” ]

【参考方案3】：

你不需要定义导入的名称，你只需像这样导入你的 css 的路径：

import './style.css';

然后你的 webpack 就会知道该做什么。否则它会认为你正在尝试导入一些 js 模块并为语法错误而哭泣。