[英]How can I add SASS file to bootstrap-vue/webpack (vue-cli project)?
I initialized a project based on Bootstrap-Vue and vue-cli template ( webpack ) and I do not know how can I add my custom SCSS files to this project. 我基于Bootstrap-Vue和vue-cli模板 ( webpack )初始化了一个项目,但我不知道如何将自定义SCSS文件添加到该项目中。
I create file src/assets/scss/app.scss and I added import './assets/scss/app.scss'
to src/main.js file: 我创建文件src / assets / scss / app.scss,并在src / main.js文件中添加了
import './assets/scss/app.scss'
:
import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App'
import router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import './assets/scss/app.scss' // HERE IS MY CHANGE!!!
Vue.use(BootstrapVue)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
but I got ERROR: 但是我得到了错误:
This relative module was not found:
* ./assets/scss/app.scss in ./src/main.js
Running 运行
vue init bootstrap-vue/webpack-simple project-name
has 'Use sass?' 有“使用无礼?” as the fourth option, choosing 'Yes' only configures webpack to extract scss from vue components.
作为第四个选项,选择“是”仅将webpack配置为从vue组件提取scss。 To use a stand-alone scss file you'll need to add an extra rule to the webpack.config.js file, eg
要使用独立的scss文件,您需要向webpack.config.js文件中添加一个附加规则,例如
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
}
I hope that helps. 希望对您有所帮助。
When I tried with 当我尝试
vue init bootstrap-vue/webpack project-name
The utils.js file contains the sass-loader needed for stand-alone scss files like the one you're trying to import, but when I ran utils.js文件包含独立scss文件所需的sass-loader,例如您要导入的文件,但是在我运行时
npm run build
I got a slightly different error to yours: 我的错误与您的错误略有不同:
ERROR in ./src/main.js Module not found: Error: Can't resolve 'sass-loader' 找不到./src/main.js模块中的错误:错误:无法解析“ sass-loader”
I then tried: 然后,我尝试:
npm install sass-loader --save
but got: 但得到:
npm WARN sass-loader@7.1.0 requires a peer of webpack@^3.0.0 || npm WARN sass-loader@7.1.0需要一个webpack@^3.0.0的对等项|| ^4.0.0 but none is installed.
^ 4.0.0,但未安装。 You must install peer dependencies yourself.
您必须自己安装对等依赖项。
If you look in the package.json it's using 如果您查看package.json,它正在使用
"webpack": "^2.6.1", “ webpack”:“ ^ 2.6.1”,
So it looks like bootstrap-vue/webpack has some dependency problems at the moment. 因此,看起来bootstrap-vue / webpack目前有一些依赖性问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.