[英]How to import css with webpack?
TWO PART QUESTION 两部分问题
My steps: 我的步骤:
cmd
cmd
npm init -f
npm init -f
vue init webpack
vue init webpack
npm install
npm install
i bootstrap-vue
i bootstrap-vue
run dev
run dev
my main.js: 我的main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
webpack.base.conf.js: webpack.base.conf.js:
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath : config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
}
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{ //this rule will only be used for any vendors
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
include: [/node_modules/]
},
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader'],
exclude: [/node_modules/] //add this line so we ignore css coming from node_modules
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
}
when I run this I get: 当我运行这个我得到:
Module build failed: Unknown word (5:1)
模块构建失败:未知词(5:1)
Part 2: 第2部分:
After some time found a solution to the above problem by installing a loader package and changin my main.js to this: 经过一段时间后,通过安装加载程序包并将main.js更改为此,找到了解决上述问题的方法:
import Vue from 'vue'
import App from './App'
import router from './router'
import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
this solved my first problem BUT : 这解决了我的第一个问题, 但 :
If i try to add a local css file like so: 如果我尝试像这样添加本地CSS文件:
import Vue from 'vue'
import App from './App'
import router from './router'
import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';
import './content/bootstrapGrid.css'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
I again get the same error: 我再次收到相同的错误:
Module build failed: Unknown word (5:1)
模块构建失败:未知词(5:1)
I am new to webpack, vue and the entire SPA. 我是webpack,vue和整个SPA的新手。 Been at this for a while now and im stuck, anyone that can see what I am missing?
到现在已经有一段时间了,我被困住了,有人能看到我所缺少的吗?
!css-loader !CSS-装载机
This is the plain css loader. 这是普通的CSS加载程序。 It will return the css code interpreting the resources inside, but it will not add it to the page.
它将返回解释内部资源的css代码,但不会将其添加到页面中。 With this loader @import and url(...) are interpreted like require() and will be resolved.
使用此加载器,@ import和url(...)的解释与require()相同,将被解析。
!style-loader !风格装载机
This loader adds CSS to the DOM by injecting a or tag. 该加载器通过注入或标记将CSS添加到DOM。 To inject a you need to get the content of the css file, and then inject that.
要注入a,您需要获取css文件的内容,然后注入它。
require("style!raw!./file.css");
// => add rules in file.css to document
But it's recommended to combine it with the css-loader, as it will interpret all the resources in your css file, instead of just having the raw css. 但建议将其与css-loader结合使用,因为它将解释您css文件中的所有资源,而不仅仅是原始css。 ( Check )
( 检查 )
require("style!css!./file.css");
// => add rules in file.css to document
If you want to add a to your css file, you need to first have the url to that file, for that you can use the file-loader. 如果要向css文件中添加a,则首先需要具有该文件的url,为此您可以使用文件加载器。
require("style/url!file!./file.css");
// => add a <link rel="stylesheet"> to file.css to document
Hope this helps! 希望这可以帮助!
Refer: css-loader , style-loader A good article on this here 参见: CSS-装载机 , 风格装载机在这方面的一个很好的文章在这里
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.