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
安装了样式加载器,我已经在devDependiecies
的package.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 加载器不起作用的主要内容,如果未能解决你的问题,请参考以下文章