首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >错误:无法解决模块“样式-加载程序”

错误:无法解决模块“样式-加载程序”
EN

Stack Overflow用户
提问于 2016-02-03 07:50:18
回答 9查看 98.2K关注 0票数 100

我使用风格-装载机与webpack和反应框架。当我在终端上运行webpack时,我在import.js文件中获得了import.js,尽管我已经正确地指定了文件路径。

代码语言:javascript
运行
复制
import '../css/style.css';
import React from 'react';
import ReactDOM from 'react-dom';
import jQuery from 'jquery';
import TopicsList from '../components/topic-list.jsx';
import Layout from '../components/layout.jsx';

webpack.config.js:

代码语言:javascript
运行
复制
var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');

module.exports = {
    entry: [
      // Set up an ES6-ish environment
      'babel-polyfill',

      // Add your application's scripts below
      APP_DIR + '/import.js'
    ],
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel',

                exclude: /node_modules/,
                query: {
                    plugins: ['transform-runtime'],
                    presets: ['es2015', 'stage-0', 'react']
                }
            },
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ],
        resolve: {
            extensions: ['', '.js', '.jsx', '.css']
        }
    }
};
EN

回答 9

Stack Overflow用户

回答已采纳

发布于 2016-02-03 07:52:41

试着运行下面的脚本:

npm install style-loader --save

修改webpack配置,在modulesDirectories中添加resolve字段。

代码语言:javascript
运行
复制
    resolve: {
        extensions: ['', '.js', '.jsx', '.css'],
        modulesDirectories: [
          'node_modules'
        ]        
    }
票数 106
EN

Stack Overflow用户

发布于 2016-04-20 01:13:21

请运行以下脚本:

代码语言:javascript
运行
复制
 npm install style-loader css-loader --save

将模块设置如下:

代码语言:javascript
运行
复制
module: {
  loaders: [
    {
      test: /\.jsx?$/,
      loader: 'babel-loader',
      include: path.join(_dirname, 'app')
    },
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }
  ],
  resolve: {
      extensions: ['', '.js', '.jsx', '.css']
  }
}

它基本上是读取加载器-测试使用babel-加载器的jsx,下一个测试是使用样式加载器和css -加载程序的css文件,这将识别模块。另外,您应该退出npm,运行“”并运行"npm“。希望这能解决这个问题。

票数 32
EN

Stack Overflow用户

发布于 2017-03-04 00:47:56

如果您试图导入带有以下行的css文件:

代码语言:javascript
运行
复制
import '../css/style.css';

并在您的webpack配置中添加了style-loader

错误声明:

未找到模块:错误:无法解决模块“样式-加载程序”

名为“样式加载器”的模块未被解析。

您需要安装该模块时:

代码语言:javascript
运行
复制
$ npm install style-loader --save-dev

或者,如果你用纱线:

代码语言:javascript
运行
复制
$ yarn add style-loader -D

然后再次运行webpack

票数 22
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35171288

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档