问题描述
我最近将Sass添加到我的项目中，该项目也正在使用vuetify，因此我知道正在处理scss。我遵循7-1文件结构，但是似乎无法在vue组件中使用样式表
我几乎尝试过test：/。s（a | c）ss $ /和版本的每个排列，但是我似乎无法使其正常工作。
我的webpack如下
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { VuetifyLoaderPlugin } = require('vuetify-loader')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');
module.exports = env => {
return {
entry: './src/main.js',devtool: 'inline-source-map',devServer: {
contentBase: './dist',},output: {
filename: '[name].[contenthash].js',path: path.resolve(__dirname,'dist'),resolve: {
alias: {
Components: path.resolve(__dirname,'src/components/'),}
},module: {
rules: [{
test: /\.vue$/,loader: 'vue-loader',options: {
loaders: {
js: 'babel-loader'
}
}
},{
test: /\.js$/,exclude: /(node_modules|bower_components)\/|.[sS]pec\.js$/,use: {
loader: 'babel-loader'
}
},{
test: /\.scss$/,use: [
MiniCssExtractPlugin.loader,{
loader: 'css-loader',options: {
sourceMap: true,}
},{
loader: 'postcss-loader',plugins: [
require('autoprefixer')()
]
}
},{
loader: 'resolve-url-loader'
},{
loader: 'sass-loader',sourceMapContents: true,}
}
]
},{
test: /\.(graphql|gql)$/,exclude: /node_modules/,loader: 'graphql-tag/loader'
},{
test: /\.(woff|woff2|eot|ttf|otf)$/,loader: 'file-loader',{
test: /\.(gif|png|jpe?g|svg)$/i,{
test: /\.css$/,use: ['vue-style-loader','style-loader','css-loader']
}
]
},plugins: [
new CleanWebpackPlugin({
cleanStaleWebpackAssets: false
}),new HtmlWebpackPlugin({
templateContent: `
<!doctype html>
<html>
<body>
<div id="app"></div>
</body>
</html>
`
}),new VueLoaderPlugin(),new VuetifyLoaderPlugin()
],optimization: {
runtimeChunk: 'single',splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,name: 'vendors',chunks: 'all',}
};
在打印到控制台的错误中是
未捕获的错误：模块解析失败：意外的字符'@'（2：0） 当前，您可能需要适当的加载器来处理此文件类型 没有配置任何加载程序来处理此文件。看到 https://webpack.js.org/concepts#loaders | //导入
@import'./_ variables.scss'
最后我的依赖关系如下
"dependencies": {
"@babel/core": "^7.11.6","@babel/preset-env": "^7.11.5","@graphql-tools/graphql-file-loader": "^6.2.4","@voerro/vue-tagsinput": "^2.4.1","apollo-cache-inmemory": "^1.6.6","apollo-client": "^2.6.10","apollo-link-http": "^1.5.17","babel-loader": "^8.1.0","cache-loader": "^4.1.0","clean-webpack-plugin": "^3.0.0","core-js": "^3.6.5","css-loader": "^4.3.0","file-loader": "^6.1.0","graphql": "^15.3.0","html-loader": "^1.3.0","html-webpack-plugin": "^4.4.1","html-webpack-root-plugin": "^0.10.0","i": "^0.3.6","less-loader": "^7.0.2","loader": "^2.1.1","lodash": "^4.17.20","mini-css-extract-plugin": "0.5.0","moment": "^2.28.0","npm": "^6.14.8","postcss": "^8.1.1","postcss-deadcss": "^1.0.0","postcss-loader": "^3.0.0","resolve-url-loader": "^3.1.1","sass-loader": "7.1.0","style-loader": "^1.2.1","vue": "^2.6.11","vue-apollo": "^3.0.4","vue-draggable-resizable": "^2.2.0","vue-graphql-loader": "^0.3.3","vue-loader": "^15.9.3","vue-router": "^3.2.0","vue-socket.io": "^3.0.10","vue-style-loader": "^4.1.2","vuetify": "^2.2.11","vuex": "^3.5.1","webpack": "^4.44.2","webpack-dev-server": "^3.11.0","webpack-graphql-loader": "^1.0.2","xml-loader": "^1.2.1","yarn-check": "^0.0.3"
},"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-plugin-router": "~4.5.0","@vue/cli-plugin-vuex": "~4.5.0","@vue/cli-service": "~4.5.0","babel-eslint": "^10.1.0","eslint": "^7.9.0","eslint-config-airbnb-base": "^14.2.0","eslint-plugin-import": "^2.22.0","eslint-plugin-vue": "^6.2.2","fibers": "^5.0.0","graphql-tag": "^2.11.0","node-sass": "^4.14.1","sass": "^1.26.11","vue-template-compiler": "^2.6.12","vuetify-loader": "^1.6.0","webpack-cli": "^3.3.12"
},解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）