导入SCSS“;“出口”;变量转换为.vue文件中的Javascript代码,该文件由vue loader加载并由webpack绑定
我的导入SCSS“;“出口”;变量转换为.vue文件中的Javascript代码,该文件由vue loader加载并由webpack绑定,javascript,vue.js,webpack,sass,vue-loader,Javascript,Vue.js,Webpack,Sass,Vue Loader,我的vars.scss中有一个变量,我想从root/app/app.vue中的Javascript访问该变量 root/app/scss/vars.scss :export { cursor: #fff; } const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-pl
vars.scss
中有一个变量,我想从root/app/app.vue
中的Javascript访问该变量
root/app/scss/vars.scss
:export {
cursor: #fff;
}
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const env = process.env.NODE_ENV
module.exports = {
entry: './app/index.ts',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'staticfiles')
},
resolve: {
extensions: [ '.ts', '.js', '.vue', '.scss', '.sass'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, '/app/')
}
},
plugins: [
new HtmlWebpackPlugin(),
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin()
],
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|vue|ts)$/,
loader: 'eslint-loader',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
}
// other vue-loader options go here
}
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.s(a|c)ss$/,
use: [ {
loader: "style-loader",
options: {
sourceMap: env === 'development',
}
}, {
loader: "css-loader",
options: {
sourceMap: env === 'development',
}
}, {
loader: "sass-loader",
options: {
sourceMap: env === 'development',
}
},
'vue-style-loader'],
}]
}
};
root/app/app.vue
<template>
<div id="yes">
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import colors from '@/scss/vars.scss';
export default Vue.extend({
mounted() {
console.log(colors.cursor);
},
});
</script>
<style >
</style>
我还尝试在测试:/\.s(a | c)ss$/
部分中,将vue样式加载程序
放在数组的开头
在尝试导入.scss
文件时,我尝试了多种文件名组合,例如相对(./scss/vars.scss
),删除扩展名,使用.css
作为扩展名,等等
我得到的错误是:
ERROR in /home/Documents/application/app/app.vue.ts
[tsl] ERROR in /home/Documents/application/app/app.vue.ts(10,28)
TS2307: Cannot find module '@/scss/vars.scss'.
我的问题:
在使用
vue样式加载程序
和vue加载程序
使用网页包构建.vue
文件的项目中,如何将.scss
变量导入.vue
文件的
部分?(请注意-我没有试图将它们导入.vue
文件的
部分)基于我的评论的示例:
SCSS片段:
$foo: #333;
body {
--variable-foo: $foo;
}
然后是JavaScript中的任意位置
const value = document.body.style.getPropertyValue("--variable-foo");
console.log(value); // outputs "#333"
为什么不简单地定义一个等于SCSS变量的CSS自定义属性(又称CSS变量),然后通过
style.getProperty()
直接读取该属性?您试图实现的目标肯定会起作用,但解决该文件时似乎遇到了一个问题。。尝试使用相对路径而不是绝对路径,如从“/scss/vars.scss”导入颜色代码>我很感激-如果我必须这么做,我会的。不过,理想情况下,我将能够利用scssexport
功能,这样我的代码就能“保证”正确的值(出于好奇——如果我的客户机有一个自定义样式表,恰好定义了变量,那么这个方法会发生什么?)CSS变量的工作方式与任何其他属性一样。取决于级联、特异性和定义顺序。