webpack css 加载器不起作用

Posted

技术标签:

【中文标题】webpack css 加载器不起作用【英文标题】:webpack css loader doesn't work 【发布时间】:2018-06-25 09:11:33 【问题描述】:

您好,我正在尝试通过我的 vue2js SPA 中的 webpack style-loader 加载引导 css。

我用npm install --save-dev css-loader 安装了样式加载器,我已经在devDependieciespackage.json 中找到了它。我还在我的webpack.conf.js 中添加了以下内容:

  
      test: /\.css$/,
      use: [ 'style-loader', 'css-loader' ]
  

然后我通过t安装了bootstrap css

npm install bootstrap@4.0.0-beta.3

我做的最后一件事是在 main.js 中导入 bootstrap css

import '../node_modules/bootstrap/dist/css/bootstrap.css'
import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css'

我也试过这样:

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

像这样:

import './../node_modules/bootstrap/dist/css/bootstrap.css'
import './../node_modules/bootstrap-vue/dist/bootstrap-vue.css'

这不起作用在命令行中给我这个错误(服务器启动后):

./src/main.js 中的错误 找不到模块:错误:无法解析“C:\Users\Adm\Documents\TheStockerTrader\src”中的“../node_modules/bootstrap-vue/dist/bootstrap-vue.css” @ ./src/main.js 7:0-62 @多主

./src/main.js 中的错误 未找到模块:错误:无法解析“C:\Users\Adm\Documents\TheStockerTrader”中的“style-loader” @ ./src/main.js 6:0-58 @多主

在 chrome 控制台中出现这个错误:

解决 'C:\Users\Adm\Documents\TheStockerTrader\src' 中的 'bootstrap-vue/dist/bootstrap-vue.css' 解析的请求是一个模块 使用描述文件:C:\Users\Adm\Documents\TheStockerTrader\package.json(相对路径:./src) 字段“浏览器”不包含有效的别名配置

找不到模块:错误:无法解析“C:\Users\Adm\Documents\TheStockerTrader\src”中的“../node_modules/bootstrap-vue/dist/bootstrap-vue.css”

我做错了什么,为什么我的 css-loader 不起作用?它说它找不到 bs 模块,但我确定我安装了它,我还检查了它是否存在于我的 node_modules 文件夹中,它是:

【问题讨论】:

你能分享你的 webpack.config.js 文件吗? 只要点击上面有问题的链接。 告诉我你的webpack 版本? 它在 package.json "webpack": "2.1.0-beta.25", 我还编辑了第二个错误并复制了更多。 【参考方案1】:

试试这个

module : 
    rules : [
...
        
          test: /\.css$/,
          include: helpers.root('src', 'app'),
          loader: 'raw-loader'
        ,
        // // css global which not include in components
        
          test: /\.css$/,
          exclude: path.join(__dirname, '/src/app'),
          use: ExtractTextPlugin.extract(
            use: 'raw-loader'
          )
        ,
    ]...

plugin : [
    ...
    new ExtractTextPlugin(
        '[name].css'
    ),
]

【讨论】:

感谢您的宝贵时间,但上面的答案实际上是正确的,我什至没有尝试您的代码。【参考方案2】:

你是否也安装了样式加载器:

npm install style-loader --save-dev

然后设置为加载器:


  module: 
    rules: [
      
        test: /\.css$/,
        use: [
           loader: "style-loader" ,
           loader: "css-loader" 
        ]
      
    ]
  

【讨论】:

我遇到了类似的错误。尽管安装了 css-loader 和 style-loader 我得到了错误。 ***.com/questions/70075787/…

以上是关于webpack css 加载器不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Python:加载的 NLTK 分类器不起作用

当元素在标记名称中包含点时,Jquery 选择器不起作用

Sass 加载器在 webpack 中不起作用

Laravel 混合问题:日期选择器不起作用

使用jquery动态更改背景颜色后,背景颜色的CSS悬停选择器不起作用

Webpack 4 - 样式加载器/url 不起作用